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Check it out yourself 


www. 123-reg.co.uk 
BReg gister 


It's never been easier or cheaper to have your own domain name! 
123-reg delivers a totally automated service with the lowest prices in the World, guaranteed! Stunning price includes: 


* Web based control panel * Web forwarding * Change name servers * Holding page wizard 

* Catch-all e-mail forwarding * 100 e-mail forwarding addresses * Full domain & renewal management 
* Change IPS tags (UK domains) » Change Contact Details » Display and e-mail invoice 

* Manage your own DNS * Domain name locking * Affiliate scheme * No transfer out fee 


Additional services include: Domain Watchers, POP3 and Sub-domains, Pre-register for new TLDs. 


Build 


It's never been as simple or as fast to build a great looking site! 

The 123-reg site builder is a clear market leader in terms of features and functionality, having been developed purely 
with our customers in mind. Exclusive to 123-reg, this new low-cost service allows anyone to build and maintain a 
professional looking web site in minutes; no knowledge of programming required! 


Includes all the necessary tools required to create and update a web site, such as over 100 designs, templates, an 
intuitive editor, tables, forms and multimedia capabilities. The product is ideal for people and companies who want to 
establish an on-line presence but don't want to get immersed in development or high costs. 


k]Host 


There's no better place to host your site! 

123-reg manages its own UK based data centres, with state-of-the-art security and all the backup facilities you would 
expect from a market leader. Your site will be hosted on a high-end server and be totally under your control via our 
easy to use control panel. Choose from two great packages that will keep your web sites on-line...all the time! from ‘ 
Regular: £2.99 
250 MB for £2.99+ per month, 1 GB data transfer (bandwidth) per month, CGI/Perl, on-line file manager, 10 POP 3 
accounts, Webalizer statistics, Unlimited e-mail forwarding addresses. 


Xtra Large: 
500 MB for £4.99+ per month, 2 GB data transfer (bandwidth) per month, CGI/Perl, on-line file manager, 25 POP 3 
accounts, Webalizer statistics, Unlimited e-mail forwarding addresses. 


Eo ma~ 


*Plus registrar registration fee, see web site for full details. **Monthly fee must be paid annually. ( Euro Ze 


t Monthly fee, must be paid annually and excludes one-off setup fee of £9.99. All prices exclude VAT. E&OE 


Serccely easy Serra ters 


Host Unlimited Domains with MyServerWorld™ 10.0 


Host an Unlimited Number of Domains for FREE using the worlds most 
advanced, feature rich Web Hosting Control Panel, MyServerWorld" 10.0 


WebFusion 
Reseller 


PER MONTH (or £500 per year) 


Nees 


Benefits of the WebFusion Reseller 
Account Include*:- 


* Design your own Control Panel 100% Branded to your 
Company for Free! 

* Design your own Web Hosting Packages and Change them 
in Real Time Online! 

* Full Customer Management System 

* WebFusion launched the Original Reseller Package in 
1998, Join the Leader not the Followers! 

* Innovative New Features added all the time 

* WebFusion Manage over 4000 Servers and Monitor them 
around the clock! 

* Instantly Setup and Manage your Accounts Online with the 
UK's Most Flexible Reseller Package 


Reseller Simple Includes:- 

* Unlimited Domains (no additional fees) 

* Unlimited E-mail Addresses (forward and catch all) 

¢ Unlimited E-mail Announcement Lists 

* Unlimited E-mail Auto responders * Unlimited Spam Filters 
* Between 5 and 500 MB of web space * Full FTP access 


Reseller Advanced Includes:- 
* All the Features that are in your Master Account in its own 
separate account 


%e 


Qs 


UNLIMITED DOMAINS 


Why not join thousands of other Resellers, 
Web Designers and Entrepreneurs and 
sign-up for the UK's Number One Web 
Hosting Reseller Account? 


24/7/365 FREE & UNLIMITED 
TECHNICAL SUPPORT 


+ us: 
qq QU\WVeD) Yala 


() K AVAVAVAVA. 


Your Master Account Includes:- 

> Host as many Domains as you like with no Additional 
Charges 

GD Unlimited Web Space 

GD 10GB Data Transfer (Bandwidth) per Month 

GD MyServerWorld™ 10.0, UKs Most Powerful Control Panel 


* FREE and UNLIMITED 24/7/365 Phone and E-mail support 

* State-of-the-Art Data Centre * 3 Connections to the Internet 

* Unlimited E-mail Forwarding * Unlimited Mailing Lists 

* Unlimited Autoresponders * Unlimited Spam Filters 

* Full CGI-BIN & Perl * Real Audio & MP3 

* MIVA Scripting Language * 10 MySQL Databases 

* Manage MySQL Databases Online » Active Server Pages 
(ASP) * SSH Telnet Access * PHP4 Scripting Language 

* Webalizer Graphical Statistics » 500 Sub Domains 

* Use our Generic Name Servers for Free * Detailed Online Help 

* Password Protection * Custom Error Messages * 15 Free CGI 
Scripts * Full FTP Access * Powerful Online Mail Client * Back 
Up Your Web Site Online * Web Site Link Checker & HTML 
Validator * Add E-commerce Option For Small Fee 

* Control Your Account Online With no Fuss * Termination 
Anytime * 99.9% Uptime * 30 Day Money Back Guarantee 

* Server Backed Up Every Day * One Hour Setup! 

Then add as many additional accounts as you like! 


MULTIPLE CONNECTIONS MONEY BACK MYSERVERWORLD 10.0 
TO THE INTERNET GUARANTEE 


baal @ pirect We welcome all major debit and credit cards. Prices exclude VAT @ 17.5% 
Debit *Some Features Only Available on Reseller Master and Advanced Additional Accounts 
order on-line: 


Host 
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Al A GLAN CE In-depth articles featuring tips, advice and inside secrets from top international animators 
TUTORIALS a ibe 
16 Character planning and design 08 Top animation tips 
24 Scrolling scenic elements Some top tips from the industry's leading 
32 Storyboards and scriptwriting animators on how to breathe life into your 
rtoon characters and Flash animations 
40 Animating your character “9 
50 Adding sound to your cartoon , . , 
58 Character and object interaction ig stad . seine : 
. ind out how we got from Felix the Cat to 
74 Splash screens and end credits the Oscar-winning Shrek in our brief 
FEATURES history of character animation 
08 Expert advice on animation id ? 
66 Animation through the ages 96 Flash training on video 
94 Book reviews Get your Flash animation off to a cracking 
start with our free 30 minutes’ worth of 
96 On the CD... Flash training on video, courtesy of 
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86 Theodore Ushev 


Bulgarian-born graphic designer whose 
simplistic and popular animations have been 
nominated for the Flash Film Festival 2003 


90 Sixsidia 
Peter O'Dwyer explains how he created 


Sixsidia’s award-winning Ponkas, and tells of 
his aims for getting a series of stings on E4 


Neostream’s 
animators created 
this cheeky dude to 
show visitors around 
its portfolio site 


FULL PROJECT 


Our complete guide takes you through the entire animation process, 
from initial character sketches to your finished cartoon with sound 


SECTION ONE 
Creating your character 


Plan your character on paper before 
designing it in Flash. Then create a library of 
body parts, and add shadows and glasses! 


SECTION TWO 
Setting the scene 


Your character's environment needs to look 
great. Create a dramatic scrolling background 
and a moving foreground element 


SECTION THREE 
Storyboards and scripts 


The story is essential to the success of your 
cartoon. We show you how to draw up a 
storyboard and get the comic-timing right 


Jon Burgerman provides illustrations 
for our seven-stage tutorial 


SECTION FOUR 
Walking and talking 


Bring your character to life by creating walk 
cycles and mouth movements. Just copy the 
actions of people and then exaggerate them 


SECTION FIVE 


Adding sound effects 


Background sounds make your cartoon more 
believable to the audience. Find out how to 
work with WAVs and Sound Objects 


SECTION SIX 


Interacting with objects 


Create objects for your character to interact 
with, and link button clicks to character 
movements for Web animations 


SECTION SEVEN 
Roll the credits 


Finish by producing the end credits. We 
also show you how to create a splash 
screen that doubles as a preloader 
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IN THIS ISSUE V 
101 TIPS FOR BETTER IMAGES 


Ten creative experts share their techniques for 
better illustration, Web design, 3D and more 


COPYRIGHT: HOW NOT TO GET SUED 
Protect yourself and respect the work of others. 
Industry lawyers share their experiences... 


ACTIONSCRIPT MASTERCLASS 
Follow this complete tutorial on scripting 
dynamic graphics for your site in Flash MX 


PAINTER 8 EXCLUSIVE! 
The latest upgrade to the natural media app 
promises some powerful new features 


ONTHECD J 


TWO FULL PROGRAMS 
MEDIAEDIT 
SOFTIMAGE|XSI V3 EXP 


VICTORIA POSER MODEL 
PHOTOSHOP & 3D TUITION 
250MB STOCK VIDEO 


iaFCS ON SALE 17 APRIL! WWW.COMPUTERARTS.CO.UK 
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SOFTWARE 


All the programs you need to develop and animate your own cartoon character... 


DUAL DEMO 
Flash MX 


You won't get very far with this month’s 
complete project if you don't have Flash. Fire 
up this powerful vector-based graphics tool 
for use from page 18 onwards 


DUAL DEMO 
FreeHand MX 


You can move seamlessly between this MX 
version of FreeHand and Flash MX, so you 
could use this demo to create curves on 
your scanned character on page 19 


DUAL DEMO 


Toon Boom Studio 


Not an all-rounder like Flash MX but a 
useful alternative for creating 2D animation. 
Read more about this demo on page 96 


DUAL DEMO 
Flix 3 
The Flash video encoder that enables you to 


edit, convert and post your animated movies 
on the Web. For more details, see page 96 


DUAL DEMO 
Magpie Pro 


This demo can be used to create realistic 
lip-syncing and animation timing for both 
2D and 3D animation. Our lip-syncing 
section begins on page 47 


PC/MAC DEMOS 
Cool Edit/Audacity 


These audio-editing software demos can be 
used to create and edit your own sound 
effects. We show you how to use Cool Edit 
starting on page 52 
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8 | Feature Character design and animation 


Character design 
and animation 


Advice from the experts 


Illustration: Daniel Mackie [w] www.danielmackie.co.uk 


Almost since the dawn of motion pictures, animated 
characters have had an important role to play. With the arrival 
of the Web and rapidly evolving technology, creating and 
animating a character has never been easier; but how do you 
ensure you get things right? We investigate... 


ou don't need to reinvent the wheel when torso with a small head and no neck suggests a brutal 


| 

starting work on character design and | thug.” Colour is also a good indicator of a character's 

animation. Decades of existing cartoons | personality, with bright tones signifying cute, good 
it mean that at least some of the hard work has_ | things, and dark colours indicating those of an evil or 
been done for you: we mostly know what works and mysterious nature. “Of course, this doesn't correspond 
what doesn't, and can borrow ideas accordingly. to reality,” says Benoit. “But such ideas are deeply 
JohnJohn's Benoit Viellefon reckons the use of ingrained within our subconscious.” 
stereotypes is key within animation: “A skinny body These effects are of great importance, because 
with a big head suggests intelligence, while a large personality is an essential trait. Notonlydoesa > 


Feature Character design and animation | 9 
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| Feature Character design and animation 


Above: This Airside/Tandem Films co- 
production for Lemon Jelly (Nice Weather for 
Ducks) was created in Flash, Maya and After 
Effects. “There are more creatures than on Life of 
Mammals,” claims Airside. “But these are better 
‘cos they know how to disco dance.” 


Clear* uses Flash as a prototyping tool when 
designing animated characters for mobile 
platforms. With such limited display 
resolutions, changing a single pixel can alter a 
character's entire personality. Such attention 
to detail also pays dividends when using Flash 


You should also consider how your character's going 
to move — something that usually goes hand-in-hand 
with its perceived personality. “For example, in Tex 


for more traditional work. 


1 USE 
STORYBOARDS 
Work out a script on 
paper, detailing dialogue 
and actions. Use rough, 
thumbnail sketches akin to 
acomic book to 
experiment with camer3 
angles and poses, 


Mark Levy, 
Traffik Cone Design 


character with a strong personality engage a viewer but 


such qualities can also suggest how a character will act. 


Props can assist with defining a character too — all 
before they've even moved. 


Making plans 


It’s important to plan your characters and animations 
because leaping straight into Flash or Illustrator 
usually means you don't explore all the possibilities. 

“| frequently start with paper, both for initial character 
visualisations and for elaboration later on,” says 
Guilame Fenwick of 300k.com. Likewise, Traffik Cone 
Design’s Mark Levy advocates storyboarding: “You can 
rapidly try out camera angles and poses, and work out 
facial features for dialogue. Make sure you get the 


most out of each scene prior to starting your animation, 


as this will save you time and headaches later on.” 


Avery's Red Riding Hood, the girl walks and jumps ina 
light way, suggesting she’s happy,” says Benoit 
Viellefon. “The wolf moves in a sneaky way — almost 
crawling — and therefore seems untrustworthy.” 

Body language and facial expressions also have a 
significant role to play in a character's definition. 
Perhaps the best resource for this is a mirror — putting 
one next to you and working out what your face and 
body language do when you're happy, mad, or yelling, 
can often be transferred to the screen. 

Designers often reckon animating the eyes is fairly 
easy. “They can sit ina movie clip, and at frame 50, we 
can animate a blink. This can then be looped, making 
the character look like it’s naturally blinking,” says 
Guilame Fenwick. He also suggests extensive use of 
ActionScript, so you can invoke expressions with the 
likes of root.head.righteye.gotoAndPlay(look_left) 
rather than using time-consuming frame-by-frame 
techniques. Guilame also reminds us that eyebrows 
can make a character look angry, shocked, or surprised. 

Exaggeration is important. Being too subtle means 
your ideas wont come across on screen. As Benoit 
Viellefon reminds us, “Animation is not real; 


1 
a Lie EX(06 ; | | IOS Ve asked some Flash designers for their top tios for successful animation... 


EXAMINE 


2 ENABLE 
INTERACTION 
The main advantage of a 
Web character lies in 
being able to interact with 
it. Therefore, make your 
character react to the 
actions of the user. 


Lionel Theodore, 
Digital Roots 


DON’T FOLLOW 
TRENDS 

While you might be 
tempted, try to avoid 
trends — they die fast and 
mean your character won't 
be ‘immortal’. 

Benoit Viellefon, 

JohnJohn 


A BE 

PRECISE 

Even the smallest details 
can have a major impact 
on your characters — 
marginal vertical 
movements to eyes can 
mean the difference 
between displaying 
surprise or sorrow. 


Mick McNicholas, 
Clear* 


RELATIONSHIPS 
A sleeping character may 
breathe deeply or snore. 
The animation will then be 
based on the character's 
breathing, with the belly in 
constant movement 
possibly affecting the 
head's position. 


Guilame Fenwick, 
300k.com 


consequently, movements too close to reality can look 
dull.” He also recommends using sound whenever 
possible: “Sounds often let you get away with murder 
— a great sound effect will sometimes compensate 
for poor animation.” 


Less is more 


Of course, too much sound will cripple people’s Web 
connections, so optimisation of content is essential 
when designing and animating characters in Flash. 
“Don't animate anything unless it’s vital to the action,” 
suggests Mark Levy. “Good animation does not 
necessarily mean movement in every frame — 
sometimes less can mean more.” He also encourages 
breaking characters up into symbols, such as the head, 
arm, leg, facial features, and so on, and also using 
duplicated shapes whenever you can: “If the character 
is face-on, you can sometimes get away with one arm 
and leg and simply flip them for the other side.” 

Repetition is another method often used in 
traditional cartoons that can come into play when 
working with Flash. “Animation can look great 
repeated,” says Airside’s Nat Hunter. “You can have a 
main character moving with lots of ‘mini’ main 
characters following, and needn't do any more work. 
This works particularly well with patterns.” 

Careful use of camera angles can also help 
streamline your movies, adding a dynamic edge to 
your character. You can also use such techniques to 
animate only portions of the screen, as Digital Roots’ 
Lionel Theodore explains: “Imagine a character 
witnessing an explosion. Rather than displaying the 
explosion full-screen, you could show it as a reflection 
onthe character's shades. The file size will be smaller 


Right: In common with all the characters at 
[w] www. mtv.co.uk/osbournes/, Jack was 
initially drawn, traced in /llustrator, and 
then coloured in Flash. Hands are animated 
and able to grasp objects, so the characters 
can interact with their environment. 


i 
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and you can also save on details.” However, Mark Levy 
reminds us to take care when showing just parts of a 
character: “Even when showing only part of a character 
in the frame, draw all of it at the storyboarding stage, to 
ensure you get the pose and perspective right.” 
Another method of ensuring a combination of 
personality, dynamics and small file sizes is to go fora 
highly stylised approach. “Using basic shapes, such as 
cones, means a character will be easy to draw from 


bizarre angles,” says Benoit Viellefon. “However, dont > 


6 BE USE VIDEO 
ENTERTAINING REFERENCE 
Make characters that If you want a realistic 
surprise the viewer and movement effect, shoot a 
regularly use humour. video of someone moving 
People will return to a and use frames from it as 
character if they're a guide for your animation. 


entertained by it, and if it Nat Hunter, 
has personality. Airside 


Lionel Theodore, 
Digital Roots 


CREATE 
MILESTONES 


In many cases it’s initially 
worth drawing only your 
main action points. Once 
everything flows well, then 
add the ‘in-betweens'’. 


Mark Levy, 
Traffik Cone Design 


REMEMBER 
OTHER MEDIA 


Even when making 
something in Flash for 

the Web, try to ensure 
designs can be used on 
paper and TV. Popularity 
and potential exposure will 
increase if your designs 
are flexible. 


Benoit Viellefon, 
JohnJohn 


1OFKE Pont 


Use your movement 
sparingly and tell the story 
using every subtle part of 
the character's movement. 


Nat Hunter, 
Airside 


12 Feature Character design 


aaa ia 
— Like many animation teams, JohnJohn 
emphasises the importance of sketching 
out ideas first, to test designs and 

camera angles. These sketches were 
for Nickelodeon. The resulting 
animations can be seen online at 

[w] www. johnjohn.co.uk/gallery/ 


Traffik Cone Design’s Mark 
Levy suggests breaking down 
complex characters’ body 
parts into symbols. These 
can then be easily moved and 
rotated on stage, while parts 
further away can be given 
slight, black tints in order to 
portray an illusion of depth. 


20 Expert Tios continued... 


be too minimalist, or you’ll have nothing to define the 
character with — you still need things such as limbs 
and hair.” Such a method also enables you to take 
other body parts and be inventive with them. Benoit 
cites the Rudolph that JohnJohn created for BBCi, 
which had a tail that doubled as a propeller, and 
antlers akin to antennae. The net result was an 
expressive and interesting character. 
Sometimes only a realistic approach will do, and it’s 
here that designers tend to fall back on Poser, with its 
.swf export function, or video reference. “For the 
human figures at [w] www.clarksoriginals.com we went 


q q USE q THE EYES 
TWEENING HAVE IT 
Whenever possible, use Eyes and eyebrows often 


tweening to animate, 
instead of drawing each 
frame by hand. This will 
reduce file sizes and also 
save you time. 


Mark Levy, 
Traffik Cone Design 


provide personality for 
your characters, making 
them look angry, happy or 
shocked. Build each 
expression into a movie 
Clip and invoke them 
when needed. 


Guilame Fenwick, 
300k.com 


q RESEARCH 
REAL LIFE 


To find out what parts of a 
character need animating, 
look at how a person 
moves in real life and 
concentrate on the most 
prominent aspects. 


James Norwood, 
specialmoves 


Guilame Fenwick of 300k.com is another advocate of trying 
things out on paper first. This image shows the character design 
process from conception through to realisation. The glitter 
effect on the woman's dress is comprised of numerous small 
movie clips, with Action Script causing them to randomly blink. 


to the park with a video camera and leapt around, then 
took the keyframes into /llustrator and traced them,” 
explains Nat Hunter. “It’s crucial to line up all 
keyframes, and draw each frame consistently with the 
one before.” One way of doing this is to copy the 
previous drawing onto the next frame, and redraw 
what's moved, rather than everything, then take the 
results into Flash and put the images on sequential 
keyframes. You must pay attention to the whole body 
when using such techniques, though, warns Mark Levy. 
“When walking, the entire body moves up and down, 
and one foot is always on the ground. But when 
running, both feet leave the ground at some point.” 
Providing characters with ‘weight’ is also a problem 
that must be overcome. “Outline, shadows and 
gradients can help,” suggests Lionel Theodore. 


14sétios® WIT 1S PRANTL 


CHARACTER 


If the character is primarily 
for the Web, forget about 
gradients or textures. 
Streamline your output 

by using solid colours, 

as per cell animation in 
the ‘old times’. 


Benoit Viellefon, 
JohnJohn 


Build your character from 
several movie clips, and 
break down the head into 
eyes, eyebrows, the 
mouth, and so on. You 
can then control these 
elements via ActionScript. 


Guilame Fenwick, 
300k.com 


“Adding a ground shadow can be achieved simply by 
duplicating the character clip, tinting it grey and 
rescaling it — this will exactly follow the movement of 
the character and works well with walking animations.” 


Character interaction 


Once you've got your characters animating in the way 
you want, remember that the Web can often take 
things further than other media. “The main advantage 
of the Web is interaction,” says Lionel Theodore. “A 
character can react to the actions of the user, creating 
a one-to-one relationship.” They can also be 
personalised, enabling you to create your own version 
of the character. “It’s often possible to add basic 


When creating characters, 
Guilame Fenwick tends to 
work with simple shapes and 
flat colour. This means he can 
easily add light and shadow 
later on, and various other 
overlaid effects. 


artificial intelligence, enabling characters to say or do 
things based on user input.” In many ways, this is the 
fundamental basis for projects such as the Osbournes 
Website by specialmoves.com. A combination of 
Guilame Fenwick’s ActionScript advice and Mark 
Levy's storyboarding advocacy should ensure that 
moving a character from a traditional animation space 
to an interactive scenario is relatively painless. 

In fact, one might argue that flexibility is the most 
important trait of all. Without that, your characters may 
never gain the popularity they deserve. Of course, 
when moving away from the Web, you may need more 
than just a copy of Flash. “It’s not powerful enough for 
everything,” explains Nat Hunter. “For the four-minute 
Lemon Jelly video, Nice Weather for Ducks, we also 
had to resort to Maya and After Effects.” 

Likewise, you may find restrictions of various media 
forcing you to tweak animations and characters 
accordingly. “For Nickelodean, we had to create two 
versions of each movie we made,” says JohnJohn's 
Christine Boulanger. “One of these had fluid animation 
for television, and one had less frames per second for 
the Web. We decided to simplify the animation instead 
of the illustration, but depending on your subject, you 
could choose the other route.” Either way, this 
highlights the importance of thorough planning, which 
is just about where we came in. EE 


JohnJohn’s characters are often made out of simple 
shapes, such as cones, spheres and cubes. Not only does 
this give them a unique quality, but they’re also 

easier to animate from various camera angles. 


Below: Detailed characters in 
motion become processor 
intensive. JohnJohn ended up 
using just three frames for this 
zebra's entire animation cycle, 
making the correct choice of 
keyframes essential. Video 
footage was used to help 
determine them. 


4 SIMPLIFY 7 DYNAMIC 
DIALOGUE CAMERA 

inmost cases, dialogue ANGLE: 

can be broken down into Loading times often make 


less than ten mouth completely fluid animation 
movements. Don't be unrealistic, so try using 
tempted to animate every — ©xCiting camera angles 
single syllable. to compensate for a lack 
Mark Levy, of movement. 

Traffik Cone Design Christine Boulanger, 


JohnJohn 


1 BE BANDWIDTH 
FRIENDLY 


Enable larger projects to 
download in parts, so the 
user can be looking at one 
part of your animation 
while everything else is 
downloading in the 
background. 


Oscar Wright, 
specialmoves 


1 QETEMENTs 


Reuse as many movie 
clips and graphics as you 
can. For instance, use an 
identical walking animation 
over various backgrounds, 
and regularly flip symbols 
so they appear to be new. 


Lionel Theodore, 
Digital Roots 


2 Osounn 


Using audio is key to a 
successful animation. 

Get sounds from the Web, 
or make them yourself, 


Nat Hunter, 
Airside 
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Cracking 


SECTION ONE 
Creating a cartoon character 


Get familiar with your character on paper before 
making a library of all its body parts in Flash 


SECTION TWO 
Setting the scene 


A scrolling backdrop and some foreground elements 
will make your character look right at home 


SECTION THREE 
Storyboarding and timing 


Behind every successful cartoon is a great story. 
Draw up every scene on paper and write a script 


SECTION FOUR 
Bringing your character to life 


Create walk cycles to get things moving, and 
prepare some mouth movements for speech 


SECTION FIVE 
Adding sound effects 


Background sounds are an integral part of the 
overall atmosphere of a Flash cartoon 


SECTION SIX 


Interacting with objects 


Make the lid fall off a dustbin, and link button clicks 
to character movements for online animations 


SECTION SEVEN 
Smooth playback and credits 


Ensure your cartoon plays smoothly with a preloader. 
And don’t forget the all-important end credits! 
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16 | | Tutorial Creating your own cartoon character 


Mlustration: Jon Burgerman [w] www. jonburgerman.com 


Creating your own 


cartoon character 


From its conception to being fitted with its first pair of glasses, your character 
needs lots of care and attention if it's going to stand out from the crowd... 


rawing characters can be a very 
+ enjoyable and rewarding thing to do. 
But to do it right takes a lot of 
practice, and then some more practice! As 
an illustration package, Flash provides a 
very natural drawing environment and you 
can use it to your advantage if you're just 
starting out. However, it’s no replacement 


for simply practising your sketching as much 
as you possibly can. 

Once you’ve created your basic character 
and know how you want it to look, you need 
to think about versatility. In Part 2 of this 
tutorial, we show you how to create a whole 
library of different arm, leg, head and mouth 
positions. You can develop the character 


still further by adding facial expressions and 
mouth movements. 

There are a lot of things you can do with 
your character to make the finished article 
appear more polished and complete. So 
we'llend this section by showing you a few 
simple tricks to turn your creation into a 
professional-looking animation... > 
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| Tutorial Creating your own cartoon character 


Part 1: Character planning and design 


The secret to cracking character design is lots of practice and thorough planning... 


Layer names 


As you build up your Flash movie, 
make a habit of naming each new 
layer you create, ensuring that 
the name is both descriptive and 
concise. Properly naming layers 
will cut down on the time you 
spend looking for specific 
objects or snippets of script 


rH You must start out with an idea in mind. If you 
don't, your drawings will be erratic and 
inconsistent. Here, we started out wanting to create 
a typical Japanese Anime character and after several 
incarnations it became the Ninja Kid. The more he 
got drawn, the more character we gave him in our 
minds, which made the whole process much easier. 


You can add additional detail and define the 

shape by adding more points as you develop 
the character. To create a beard, for example, just 
add more points showing the outline of it on the 
face, or experiment with more elaborate hairstyles! 


7 | Once you're happy with the character, you 
need to have a good base drawing from which 
to start the process in Flash. The next step is to 

scan the image into your computer and save it as a 
jpeg file. Open Flash and import the image 
(File>Import) — it now appears on the main stage. 
Next, we're going to trace the image using the 
various tools in Flash. 


2 | Most character artists start by drawing on 
paper rather than straight into an application. 


So, first, draw a very rough sketch of how you want 


your character to look. This is to get your original 
mental image down on paper for you to develop 
and refine. 


The first few drafts of the character are 

unlikely to be the versions you end up using, 
but take the time to play around with things to see 
what you do or don't like. You need to draw the 
character time and time again until you become 
completely at home with it. Draw it from different 
angles and in different poses. 


8 | Create a new layer above Layer 1 (where your 
imported jpeg was placed). Then lock Layer 1 
by clicking on the dot in line with the padlock. 
Doing this prevents you from moving the scanned 
image by mistake when you're tracing over it. All 
the drawing in Flash will be done on the layer 
you've just created. 


Next, you need to start working out the 

proportions of your character. So, start another 
sketch, still on paper, and draw points to dictate 
where the eyes, eyebrows, shoulders, elbows, 
hands, hips, knees and ankles should be. Then start 
to draw an outline by joining up the points. 


We've all seen flat characters on the Web and 

TV, but you could try drawing in 3D. This can 
make a big impact to the finished animation. It's 
essential to be able to draw the character from 
memory because you'll have to draw them in lots of 
different poses and situations for the final cartoon — 
knowing them by heart is the only way you'll be 
able to do this consistently. 
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9 | There are various tools you can use to trace 
over your drawing. The first is the Pencil tool. 
This just draws a line that can be set to Straighten, 
Smooth, or Ink. Straighten makes your lines very 
angular; Smooth smoothes out any wobbles; and 
Ink does neither. Selecting Smooth is a good option. 


Label Layer 


Use a Label Layer to add labels 
to key events in Movie Clips and 
in the main timeline — even if 
you don't need to refer to therm in 
ActionScript. It helps to keep 
track of what's happening 
where, especially when you 
have to juggle several clips in 


asingle movie 


The next tool you can use is the Paint Brush. 

This is normally the best option if you're using 
a Pen and Tablet because it allows you to choose 
whether or not to be pressure sensitive. This enables 
you to create very natural looking strokes, but it can 
be time-consuming to master. 


13 Now start breaking down your character into 
useable parts for animating later on. Most 
commonly, a character breaks down into head, eyes, 
body, arms, legs and a shadow, but this depends on 
what you've drawn. Later, we'll show you how 
simply swapping some basic symbols can have a 
dramatic effect on the appearance of the character. 


When assembling your character on the main 
stage, you can employ a similar technique on 
the timeline. Create a new Layer folder by clicking on 
the + icon underneath the layer names, and name it 
after your character. You can now add as many 
layers as you need under this folder to hold all the 
character parts. This makes everything that much 
tidier and easier to manage as the cartoon develops. 


> 
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You can also use the Pen tool, which enables 
you to create curves in a similar style to 
Illustrator and FreeHand. It isn't the most natural 
of tools for creating an animation so is probably 
best left for times when nothing else will do the 
job. So, using your choice of tool, trace over the 

sketch completely. 


14 | Create a new Library folder by clicking on the 
Folder icon at the bottom of the Library 
palette. Give the folder a name. This new folder will 
hold all of your character's associated parts and is a 
really convenient way of managing your assets as 
they increase in number. 


Because you're developing a cartoon in Flash, 

the timeline can become quite a confusing 
place. By being strict with your layers and folders 
you'll be making things much easier for yourself in 
the long-run. Later, when you add sound effects 
and speech to your movie, it'll be easier to keep 
track of everything. 


The next step is to colour your character. There 

are two main ways of doing this: using the Fill 
tool or the Paint Brush tool. Each has its uses, so try 
them both and get used to them. If your cartoon is 
going to be published on the Web then try to use a 
Web-safe colour palette. Alternatively, you can mix 
your own colours using the Mixer palette. 


Select your broken-up character bit by bit, 

converting each into Graphic symbols (select 
the piece and then go to Insert>Convert to Symbol 
— or press F8) and then in the Library palette drag all 
of them into your new character folder. 


HEHE 


18 | Be smart about the detail in your drawing. 
Keep things as simple as possible because the 
more detail there is, the slower the movie will play 
back and the larger the file size will be. But, more 
than that, the character can begin to look tatty if 
there's a lot of small detail on it. Clean lines not only 
look better but animate more smoothly too. } 
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| Tutorial Creating your own cartoon character 


Part 2: Skinning a character 


Now that you've got your basic character, you need to add some depth and detail... 


Sorting actions 


Putting your timeline 
ActionScripts on a separate layer 
labelled Actions is a good idea. 


Library tips 

Add Custom Libraries to the 
Common Libraries menu. Create 
anew Flash file and add any 
symbols or items you wish. 
When you're done, save the 

file to the Libraries folder inside 
the Flash program folder. You 
can continue adding to the 
Library by reopening the original 
file in Flash. 


One thing that can add real depth to a 

character is good shading. This is really easy to 
do in Flash although it takes a little practice to make 
it look convincing. One thing you have to have fixed 
in your mind is the light source and the directions it’s 
coming from in your toon world. This denotes which 
areas are highlighted and which are in shadow. 


Draw a line across an area where the colour 

should be slightly lighter in shade to the other 
parts of the body. Start your line right outside the 
main drawing and continue the line through 
another obvious finish point. 


Now get rid of the lines you added. With your 

mouse, double-click (or sometimes triple-click) 
on one part of the shaded line. This should select 
the whole line of that colour and nothing else. Hit 
Delete on your keyboard to remove the line, just 
leaving your shaded area. 


ll 


Put together a sample of your character from 
the bits in the library and then break them 
apart (Modify>Break Apart) on the stage. (Normally 
you'd shade the individual pieces separately, but 

we'll do it as a whole in this example.) 


5 | Select the Paint Bucket tool and sample the 
colour in the area you're shading. Open the 
Colour Mixer palette and make sure the bucket is 
selected and not the line colour. You'll see a slider to 
the right of the main colour mix that runs from 
white to black through the selected colour range. 
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g Removing these lines has to be done carefully 
or artefacts will be left in your main drawing. 
Where lines cross each other in Flash, it can 
sometimes leave remnants, and because you've 
chosen a colour that’s completely different to the 
other lines, the results will be unsightly. Have a look 
over the whole drawing and make sure there are no 
remnants of the lines. 
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gq Deselect everything. Decide where your light 
source is coming from — let's say simply from 
above in this case. Select your Pencil tool and 
choose an ink colour that's completely different to 
any colours already used in the character. 


Move the slider up slightly to make the 
selected colour a little lighter. Go to the main 
drawing on the stage and click inside the area you 
want to fill with the new colour. Follow step 4 and 
this step for every area that's going to be 
highlighted from the light source. 


Sz = 


9 | Now do this over again, but for areas that 
would be in shadow because of the light 
source. This time, move the Colour Mixer slider to a 
slightly darker shade than the main colour. Your 
drawing, with highlights and shadows, should now 
start to really come alive and have some real depth. 


Use layer folders 


Layer folders in Flash MX enable 
you to organise material into 
categories. Create a folder to put 
non-visible items like labels and 
actions to keep them separate. 
You may want to differentiate 
static stage objects from 


animated elements 


You can now start drawing more assets for 

your character. Think about the kind of poses 
he'll adopt and draw them. It's quite an easy job to 
swap around arm poses to create a completely 
different appearance, so build up a good size library 
of body pieces in different positions. Make sure you 
add the pieces to the character Library folder. 


You can also use a mirror to study common 

facial expressions like frowning or laughing, 
smiling and so on. Again, break up the drawings 
into symbols and put them into the character's 
Library folder. One eye from a surprised look and 
the other from a concentrating expression can give 
the character a confused look, and can save on file 
size because you're reusing assets. 


Accessorise! Draw some items that your 

character might use. Weapons, sports 
equipment or bags can all make a difference to the 
final output. A broken tennis racquet lying on the 
floor next to a grumpy looking kid will convey a 
story quite easily. 


11 | You might find that you don't need to go as 
far as drawing entirely new poses. Just 
drawing a few new head angles or leg/arm positions 
might be enough. Draw a sequence of your 
character moving his head from left to right, for 
example - this can be used when your character is 
saying ‘no’. 


4 Hair is another thing that should be broken up 
into its own symbols. This way you can 
emphasise all sorts of movement just by swapping 
hair facing in one direction for it facing in the 
opposite direction. This is useful if a character is, say, 
running against the wind and suddenly stops. The 
eye picks up on small things like this even if it 
doesn't consciously register with the viewer. 
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17 The more assets you have, the more polished 
your final cartoon will be. However, it takes 


practice to develop a smart library where your assets 
can be intelligently re-used without it being obvious 
to the viewer. Planning carefully beforehand can 
save you time and extra work later on. 


You need to think about how your character 

communicates with other characters or even 
the viewer. Draw a series of mouth positions for the 
different phonetic sounds. Using a mirror will make 
this job much easier, as you can copy yourself 
making an ‘ooo' sound and so on. Do this for all the 
most common sounds you can think of. 


15 Your character asset library doesn't have to 
stop there though — you can add different 
items of clothing too. Think about hats, coats or 
different shoes. You'll almost certainly find that 
more assets make life much easier later on when 
you're assembling your cartoon. 


G File size will play an important part in the final 
movie if it's for Web delivery, so it's vital to 
always be thinking how you might re-use symbols 
you've already created. You may be able to mix and 
match arm positions, for example, rather that draw 
new ones. An arm bent at the elbow can be rotated 
to create several new positions, and this dramatically 
saves on file size for the finished article. > 
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Tutorial Creating your own cartoon character 


Part 3: Finishing touches 


Here are a few simple tricks to give your cartoon the edge... 


Smoothing objects 


You can reduce the complexity of 
an object or group by going to 
Modify>Curves>Optimise: 
Smooth out the object, reducing 
the number of micro-curves. In 
most cases you won't see much 
difference, but you will optimise 
the movie for export — resulting 


inasmaller file size. 


G We'll now show you how to create a pair of g Draw a set of glasses to fit your character's 
glasses for your character. Using shading for face. Colour in the lenses with a light blue 

the glass, you can create some really convincing colour. Select each lens fill and make them into 

effects. In Flash, insert a new symbol (Insert>New symbols too, so you have, say, two new Graphic 
Symbol), and make it a new Graphic symbol. You're symbols called ‘lens_left' and ‘lens_right’. Then 

taken straight to the symbol editing screen. delete them from within the glasses symbol. 


[5 | Select the lenses one at a time and in the 
Properties panel you'll see a drop-down box 
on the right called Colour. Click on this and then 


4 | Go back to the main stage where your select Alpha. Another box appears to the right and 
character has been put together and drag out has a percentage figure in it. This is how visible the 
the parts of the glasses from the Library that you symbol will be. Slide this scale up or down until the 
need for your scene. Build up the parts into a pair lens looks like it's casting a tint over the graphics 
of glasses. below, but is still visible. 


Add a stripe down the middle of the lens 
graphic in white — this will create a highlight 


effect on the finished article. Do the same thing for Move back to the main scene and look what 
the other lens by double-clicking on its symbol in you've created. Now your character is wearing 
the Library. shiny new glasses! 


Break up the other parts of the glasses and turn 

them into symbols too. You may not need all 
parts of the glasses if your character is wearing 
them, because some parts might not be visible 
when your character is in certain positions. 


G Once you've done both lenses, they should 
look like proper glass lenses on the character's 
face. Later on, as you animate the character, the 
effect will become even more noticeable and 
convincing. However, you should also add some 
shading to the lenses. In the Library palette, double- 
click on one of the lens symbols to move into the 
Edit screen. 


9 | You could employ this technique for a whole 
host of different things such as see-through 
clothes, plastic bags, windows and even smoke! It’s 
just one small thing that can make a big difference 
to the final output. FEES 
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| Tutorial Setting the scene for your character 


Illustration: Jon Burgerman [w] www. jonburgerman.com 


Setting the scene 
for your character 


Your character needs a stage to perform on. We 
show you how to create a scrolling background 
and some moving foreground elements... 


ackgrounds are the core of any Foreground elements can be as vital as 

scene. They determine how the background elements. The main thing 

audience looks at a certain piece of about foreground bits and pieces, however, 
action, so you have to be quite careful with is that you can insert movement into them. 
the amount of detail in them. Sometimes We'll create two foreground elements in 
less is more. We show you how to make a Part 4 of this tutorial, one with movement 
cool scrolling background over the page. and one without. > 
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| Tutorial Setting the scene for your character 


Part 1: Background basics 


Create a stage in Flash and build some houses on it... 


Convert to symbols 


In Flash MX you can convert any 
object into a symbol by selecting 
it and dragging it directly to the 
Library. A dialog enables you to 
select what type of symbol you 


wish to transform the item into. 


g Let's create a simple looping background that 
has re-usable symbols in it. Open Flash and 
create a new blank document. In the Properties 
panel set the movie size to 400x200. This gives you 
anice widescreen-style stage to work with. Make 
the Background Colour of your movie a dark blue 
and set the Frame Rate to 15fps 


Now use the Colour Mixer palette to select the 

fill colour (the Paint Bucket icon) and move the 
slider down a little so that the fill becomes a light 
grey colour. Then fill your windows with this new 
colour. Do the same for the door, only make the 
grey a little darker. 
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Now select one of the house symbols and, in 

the Properties palette, select Colour and then 
Tint. A colour swatch and percentage meter will 
appear. The symbol on the screen may suddenly 
turn a weird colour and be blocked out, but don't 
worry about this. 


g When creating a scrolling background, the 
images have to extend beyond the actual 
stage size so that the scrolling doesn't look too 
repetitive. With this in mind, you have to make your 
background image about one and a half times the 
width of the stage. 
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5 | Select the whole graphic (Edit>Select All) and 
make it a Graphic symbol (Insert>Convert to 
Symbol or F8). Name it ‘house1' because you're 
going to be creating a few of these. 
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Next, click on the colour swatch and choose a 

nice shade of blue. This is going to be a night 
scene, and blue will make the houses look like 
they're palely lit up. Once you've selected your blue 
colour, slide the colour percentage down to around 
40 per cent. This house should now look like your 
white house, but with subtle shading instead. 


Start by drawing a single house to form part of 

the background. Use the Line tool to draw a 
basic shape and add windows and a door. Then use 
the Paint Bucket tool to make the colour of the 
house white. 


Now draw another house next to the newly 

created symbol on the stage. Make the house 
a similar style to the existing one to keep it looking 
consistent. Follow the same processes above and 
turn this into another Graphic symbol, ‘house2'. 
Do this again a few times, drawing maybe four 
different houses in total. 
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Do this for the other houses on your stage, 

each time selecting a different shade of blue or 
purple. You can adjust the percentage slider too, to 
experiment with the intensity of the colours. 


Part 2: Building extensions 


Extend your images off the stage to create a continuously scrolling, seamless background... 


Edit gradients 


Gradients can be moved within 
an object using the Transform Fill 
tool in the toolbox. This enables 
you to resize, rotate or change 
the centre of the gradient applied 
to an object on the stage. 


Once you've completed this for all the 

elements on your stage, it's time to make the 
background image extend to about one and a half 
times the width of the stage. So, drag another 
instance of one of your houses onto the stage and 
place it at the end of the line. 


Continue to do this with your house symbols 

until they reach to the end of the stage plus 
half that distance again. You should now have a line 
of houses that, on first appearance, don't look 
identical and will set a scene quite nicely. 


Click on any frame between frame 1 and 90 

on the timeline and, in the Properties palette, 
select Tween>Motion. This tells Flash to create all 
the in-between frames between frame 1 and frame 
90. If you drag the red playhead indicator along the 
timeline, you'll see the grouped houses move from 
right to left along the screen. 


To make this house look different from the 

others, you can make a mirror image of it. Go 
to Modify>Flip Horizontally to do this. You can also 
scale the size of the house a little by using the Scale 
tool on the toolbar. 
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Select all the houses and convert them to a 

Movie Clip symbol. Call it ‘street_anim’. 
Double-click on the symbol to enter the editing 
screen. You should now see all of your houses as 
individual elements again. Group them together 
(Modify>Group) to make sure none of them is 
moved independently by mistake. 


8 | Scrub the playhead along until you find the 
frame where the last house on the right is 
about to move onto the stage fully. Create a new 
layer on your timeline by clicking on the + folder 
icon just below the layer names. 


Adjust the colour of this new instance as 

before. Now you should have another new 
house on the stage, which should look quite 
different to the original one. This is a perfect 
example of re-using assets and therefore keeping 
your file size down. 
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G Insert a new keyframe at frame 90 
(Insert>Keyframe) and then click and drag the 
grouped houses to the far left-hand side of the 
screen so that the last house is all but off the stage 
to the left. 


Insert Frame 
Remove Frames 


Clear Keyframe 
m Convert to Keyframes 
Convert to Blank Keyframes 


Cut Frames 
Copy Frames 


Paste Frame 


Clear Frames 


Insert a new keyframe on this new layer. Go to 

frame 1 of the first layer and select the houses 
and copy them (Edit>Copy). Go back to your new 
keyframe and paste them onto the stage making 
sure that you've placed them on the new layer. > 
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| Tutorial Setting the scene for your character 


Building extensions continued... 


Rounding corners 


You can set how round the 


corners of a rectangle are by 


7 
| 


using the Round Rectangle 


% 
Radius option button in the e 
A 
toolbar when the Rectangle tool o 
is selected. If you preferto set f 
the corner radius visually, draw a) 
i Select Al of 
your rectangle and — without Deselect All | 
releasing the mouse button — ee a 
q Rotate and Skew ‘se 
press the up and down cursor Dueetbans telapars ‘ai 
arrows on your keyboard to x Eat 
| Edit In Place 


alter the roundness of the Edit In New Window 


rectangles corners. 


Now click on frame 90 of your new layer 

and insert another new keyframe 
(Insert>Keyframe). Then click and drag the new 
houses so that they're in position behind the old 
houses again, only this time on the left-hand side of 
the screen. Make sure that the distance between the 
two sets of houses is the same as it was previously. 


10 | Select the newly pasted houses and move 
them into position just after the old ones on 
the right-hand side of the stage. If this is done 
correctly, they'll be slightly off the stage. 


i 
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Go back to Scene 1 (click on the cookie crumb 
trail along the bottom of the timeline) and 


make sure that your new symbol (street_anim) is 
placed properly along the bottom of your stage with 
the left edge of it on the left edge of the stage. 


Save your movie and then test it. You should 
have a movie with a continuously scrolling, 
seamless background. 


insert Frame 
Remove Frames 


Insert Keyframe 
Insert Blank Keyframe 


Convert to Keyframes 
Convert to Blank Keyframes: 


Cut Frames 
Copy Frames 
Paste Frame 
Clear Frames: 
Select All Frames 


G Click on any frame on Layer 2 and select 
Tween>Motion again in the Properties palette. 
This tells Flash to create the in-between frames for 
the new set of houses too. Scrub your playhead 
back and forth along the timeline from start to finish 
and the houses should move across the screen in a 
smooth progression. 


If it's moving too quickly or too slowly then go 

back into the street_anim Movie Clip. Here, 
play around with the amount of frames it takes to 
move both sets of houses across the screen. 


Part 3: Additional touches 


Adding the moon and some clouds to your movie... 


@ To add some finishing touches to the scene, 
why not introduce some clouds and a moon to 
the movie? Make sure you're in Scene 1 of the main 
movie and create a new layer. Click and drag this 
layer so that it's below the layer where you've 
placed your houses. 


oe eee Je 


Using the Circle tool, draw a round shape on 
the stage for a moon shape — don't worry if it’s 

partially hidden behind the houses. As they scroll 

across, you'll get to see flashes of the whole moon. 


eazeaorre! 
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3 | To add moving clouds, follow all the previous 
steps again, but drawing clouds instead of 
houses. And when you get to the colouring stage, 
use Alpha instead of Tint. This way you can give a 
semi-transparent appearance to the clouds. Also, 
make the clouds scroll slower than the houses by 
adding more frames to their Movie Clip — this creates 
a sense of parallax that adds to the movie's feel. 


Part 4: Foreground elements 


Create a car to zoom across the screen in front of your houses... 


Movie modification 


Quickly access the full Ae) ee 
Properties dialog for the current 
movie by double-clicking on the 


frame rate on the timeline. 


Let's carry on with the ‘houses’ file now. 


Open up the finished file and make sure you 
lock down all the existing layers by clicking inline 
with the Padlock icon on the timeline. This prevents 
you from accidentally moving any of the 
background elements. 


4 | Go back to your main stage and create a new 
Movie Clip symbol (Insert>New Symbol) 

Call it ‘car_anim’ and, again, it takes you into the 
editing screen 


insert Frame 
<j Remove Frames 


§ Insert Keyframe 
Insert Blank Keyframe 
Convert to Keyframes 
Convert to Blank Keyframes 
Cut Frames 
Copy Frames 


Clear Frames 
Select Ail Frames 


Click anywhere within frames 1-20 and then 

in the Properties panel select Tween>Motion. 
Flash then inserts a series of in-between frames for 
you. Scrub the playhead over the timeline to see 
the movement. 


Linkage 


D Epon for Actionscript 
S Export for runtime sharing 
— Wmpont for runtime sharing 


(2) Create a new Graphic symbol (Insert>New 
Symbol) and call it ‘car1'. This takes you 
straight into the editing screen. Draw a car — we've 
done a futuristic-looking hover car, but you can draw 
whatever takes your fancy 


G Drag an instance of your car1 Graphic symbol 
into the middle of the stage. We're going to 
animate the car moving left and right as if it's 
accelerating and slowing down. 


© foreground.fla 
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8 | Click on frame 30 and Insert>Keyframe to 
insert another keyframe. This time select the 
symbol car1 and, with the Shift key held down, 
use the left arrow key to move the symbol three 
jumps to the left. This moves the car back to its 
original position. 


@ Select the window fills of your car and convert 
them to a symbol of their own (Insert>Convert 
to Symbol). Call it ‘glass’. Select the newly created 
symbol on the stage and, in the Properties panel, 
select Colour>Alpha and give it a percentage that 
makes it slightly transparent 


Insert Blank Keyframe 


Convert to Keyframes 
Convert to Blank Keyframes 


Select All Frames 


G Insert a new keyframe at frame 20 on the main 
timeline by selecting the frame and clicking 
Insert>Keyframe. Click on the instance of car1 and, 
with the Shift key held down, hit the right arrow key 
three times. This moves the car to the right in larger 
chunks than just by using the right arrow by itself. 


9 | Click anywhere between frames 20 to 30 and, 
in the Properties panel, select Tween>Motion. 
Scrubbing the playhead now will move the car 
forwards and backwards. Notice that it moves back 
more quickly than moving away because we 
allowed more frames for the backwards motion. > 


p-— 
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0 | Tutorial Setting the scene for your character 
Foreground elements continued... 


Show/Hide layers 


When working with multiple 
layers, you may sometimes need 
to isolate elements as you work 
on them. There are different ways 
to do this depending on the type 
of object you're editing and the 
number of layers inthe movie 
The quickest way to isolate a 
single layer is to click on the 
Show/Hide All Layers symbol in 
the timeline, then make the layer 


that you want to work on visible. 


Layer Folder 
Motion Guide 


Keyframe 
J stank keyirame 


Next, insert a normal frame at frame 60 

(Insert>Frame). This allows the car to pause 
between moving forward and backward so it won't 
look like it's on a bungee! 


(kh Ae oe 


Double-click on the instance of car_anim. You 

should now be in the ‘edit in place’ screen. The 
main elements of the scene should still be visible 
although slightly faded off 


Modify Text Control _Window = 


Click anywhere on the timeline between 

frames 1 and 75 and, in the Properties panel, 
select Tween>Motion. Once again, scrub your 
playhead along the timeline to see the movement 
Flash has just created for you. 


Lastly, to make the movement even more 

convincing create another Movie Clip symbol 
(Insert>New Symbol) and call it ‘car_anim_scroll’. 
You're taken straight into the editing screen again. 
Drag an instance of car_anim into the middle of the 
screen and then return to your main stage (Scene 1) 


Insert Frame 


; insert Blank Keyframe 


Convert to Keyframes 
Convert to Blank Keyframes 


Select AU Frames 


Actions 


¥ Properties 


Insert a new keyframe at frame 75. Our movie 
will be running at 15 frames per second (we 


set that right at the beginning of the houses tutorial) 


and we want the car to take five seconds to cross 
our screen. 
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Double-click anywhere on the screen (apart 
from your car instance) and you're taken back 
to the main stage of Scene 1. The instance of 
car_anim_scroll should still be in the place where 
you put it during step 12. 
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fees ence 
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We're going to edit this Movie Clip in place to 

make life a little easier for ourselves. Insert a 
new layer above all the others (which should still be 
locked down) and then drag an instance of 
car_anim_scroll onto this layer. Position it at the 
bottom left-hand side of the main stage, just off the 
side of the visible screen. 


G With your timeline indicator at frame 75, Shift- 
click and drag the car from just off the left- 
hand side of the screen to the opposite side, just off 
the right-hand side. Shift-dragging constrains the 
car on the horizontal axis. 


Now save and then test your movie. You 

should see your scrolling houses, clouds and 
moon as before, but now the car that you drew 
should be surging across the screen too. FEE 


“ZINGMEDIA 


Win two da ys’ worth of Flash training 


Everything you need to know to start designing great Flash movies now... 


e’ve teamed up with Zing Media to offer you 
iW the chance to win one of two places on its 
two-day Flash training course. 

Enter our competition and you could be attending 
the “Introduction to Flash MX” course and extending 
your Flash skills. This two-day course is worth £495 
and is one of several held every month at Zing’s 
London training centre near Tate Modern. 

Flash is the industry standard for creating high- 
impact, vector-based Websites, and Zing Media’s 
introductory course is a classroom-based, hands-on 
training course that will teach you the foundations of 
this important software package. 

Learn how to create animations using motion and 
shape tweening, and use buttons, symbols and movie 
clips to produce fully interactive movies. You'll also be 
given an introduction to ActionScript and learn how to 
create a fully Flash-based Website. 

For more information on Zing’s schedule of courses 


and a more in-depth run-down of what the course 
entails, go to [w] www.zingmedia.co.uk or call 
[t] 020 7928 1112. 


The Question 


Which famous art gallery is the Zing training centre 
located near to? 


To Enter 


The easiest way to enter is via our Website at 
[w] www.computerarts.co.uk/competitions. 

Alternatively, you can click the Competition tag on 
the Contents screen of our cover CD and enter CAS45 
as the competition name. Fill in the rest of the form 
and then click Submit Entry. 

Finally, you can send your answer ona postcard, 
along with your address and a contact number, to: 
CAS45 Competition, Computer Arts Special, 30 
Monmouth Street, Bath, BAl 2BW. 


The Rules 

The competition closing date is 3 June 2003. 
Employees of Zing Media, Macromedia or Future 
Publishing, or any of their agents or families, may not 
enter. Multiple entries will not be accepted. The 
editor's decision is final. There are no cash 
alternatives. No other correspondence will be entered 
into. Please indicate if you do not wish any of the 
companies involved in this competition to contact you 
with further offers. We won't pass details on to third 
parties. This competition is open to UK residents only. 


Previous winners — issue 43 


InDesign 2.0 — Derek Clark from York. 
Elements 2.0 — Rod Palmer from Gravesend in Kent. 
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| Tutorial Storyboarding tips and correct comic timing 


Illustration: Jon Burgerman [w] www. jonburgerman.com 


Storyboarding tips and 
correct comic timing 


A well-planned storyboard is essential for successful cartoons... 


At he best animation in the world isn't 

; worth a thing without a great story 
Vi behind it. This is the core of all 
animation, and is the most important aspect of 
any planning you're likely to do when producing 
a cartoon. It’s also the single most useful piece 
of planning you can do to help you work through 
and finish your cartoon. You'll find yourself 
referring to it endlessly. 


| 
| 
| 
| 


In part 2 of this section we look at comic 
timing. This is when the punch line of a joke has 
to be delivered at just the right time to make the 
most impact. It’s not an easy skill to master, and 
it’s even harder to get right in a cartoon. In order 
to help you get the timing right first time we show 
you how to create something called an 
‘animatic’. Read on to see what this is, how it’s 
made, and how useful it can be... > 
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Part 1: Putting together a storyboard 


Follow our steps to planning every scene on paper before doing any hard work in Flash... 


Before you do anything, work out what your story is. 

What are you trying to tell the audience? What's going 

to happen? Who's it going to happen to? You must write 
out 4 story before anything else happens. It’s the cornerstone of 
everything that comes afterwards. Write it down and discuss it 
with someone else — bounce ideas back and forth. Some of your — 
plans wont work, so now's t ne time to think of: ‘somethi ; else... 


It's difficult to do, but try to remove yourself frorn the 

whole thing a little and put yourself in the place of the 

audience. Will it work for them? Sometimes (read: 
most of the time) you'll find your story includes something that 
needs a little prior knowledge, and a new audience might not 
have that knowledge. 


How many times have you heard (or said yourself) that a 
really h d film a bit crap, although it had 

awe: all, that isn't the way to go. No 
amount of awesome 2 2 ffects is going to hide 
acrap story. ) e think purely about the sto d how 


you re going to portray it in your animation. 


So, you've got your basic story set out. There are a few 

things you'll need to bear in mind when transferring 

your story to screen, What works on paper will definitely 
need to be translated well. to make sure the audience gets the 
idea. There are a few devices you can.use to help... 


You need to establish your character by giving the 
audience some kind of visual clues as to their 
: personality. background or situation. This can be done 

in any number of ways. If your character's a bit down on his luck, 
you might think about having an opening shot situated in a bar, or 
show 4 really unkempt house. These visual clues will provide the 
audience with the background detail they need to relate to the 
character, Remember that they don't have access to your 
character boards. — 


Make sure your story really is a story and not justa 

snapshot of time. There should be a real purpose to the 

animation, If your story is about a traffic warden’ day, 
for instance, you need to produce something that's a little more 
than just a series of instances, What's the upshot? Does he/she 
give up, become an illegal parker and get a ticket too? Find the 
story that you can illustrate on screen. 


to find a way of letting the 
Take the Karate Kid movie, for 
s a kid who is moved toa 


\ te teaches we to 


Every scene must have a point. Pointless scenes stick 

out like a sore thumb ina cartoon and the audience will 

notice. Make sure your scenes are used well. An 
example of a good scene could be that your character is standing 
facing the screen, feeling safe after having just escaped from 
someone. However, the audience can see behind him, and his 
pursuer has just run past the open door, spotted him and sneaked 
into the room behind your character. The audience knows 
something that the character doesnt. 


Draw a sketch for each major scene and stick them up on the wall for reference. You can easily change the order or add and delete pages. 


Utilise everything you know about filmmaking. And you 


know a tot, right? No? Well, watch all your favourite 
; movies again, taking note of how the director uses 
- camera angles and positions. Notice all the different types of 
camera shots and the composition of the scenes. You can learna 
lot by critically watching alt of these things. 


Know the different ways to use the camera. Long 

Distance Shots are pretty obvious — the kind of thing 

you'd use to establish the setting if your cartoon was in 
a football field, for example. Medium Distance Shots are what 
you'd use to show your character from the head to the knees — 
use this to show your character performing a task with his hands 
maybe. And lastly in this series, there's the Close Up. This is a 
very powerful method of communicating with the audience. 
Use it wisely. 


ot set-ups too. Over the 
ere you're 2 ne from over 
someone's shoulder, is n ly used during a two- 
person d althot c o be used to show your 
ch as a crowd at a football 
game. A Cut-In shot 
that isn’t di 
table, for instance, or a mobile flashing becaus e ringer i 
off and the character doesnt realis meone (the pers 


they're waiting for) is calling them. 


Panning the camera can also be a useful thing to show, 

particularly if the scene is situated in a street. Showing 

the day-to-day action along that street and then 
stopping the camera on your character's house. for instance, 
would be a good way of setting the opening scene. And lastly, a 
Zoom shot is a good way to completely focus the audience's 
attention on something. Watch as a horrified expression appears 
on your character's face! 


Astoryboard takes the form of a series of rough 

sketches that you can use to set out the main scenes of 

your story. We produce a new sketch for every major 
scene or camera change. Of course, there are no cameras in 
Flash, but by ‘camera change’ we mean every time the viewer's 
perspective is going to change, ora new scene is entered. This 
helps you to work out the timings and will show you if two scenes 
are going to work together or not. 


There are many ways that studios produce storyboards 
There's even software around that will ist you in 
doing it, but ther imply creating 
one on paper that you can manipulate as you need to. To this end, 
we always sketch our scenes on sheets of A4 paper — one scene 


or camera angle change to eac ‘et of paper. 


Having each new scene ona single sheet of paper 

enables you to lay them all out (or pin them on the wall) 

in the order that they appear. Should you need to add or 
delete scenes or even change the order, you'll find it much easier 
doing it like this. Also, this method will help you to create an 
animatic later on (see over the page), 


the storyboard, we always 
“create a character board for each of the main 
cters. This normally: takes the form of a sheet with 
| several shots of the character i in different poses. It also shows - 
: Pie colon and any other det specific to this character: like, 


Asan accompanime! 


Once you've sketched a sheet for each scene, you can 

lay them out in order and anyone should be able to 

understand what's going to happen if you talk them 
through it. Pin them on the wall, or lay them out if you've got 
room, to get the most benefit from them. Talk it through with the 
other people working on the project and make sure all your 
ideas will work together; if not, then adjust, change or add scenes 
now rather than after you've drawn hours of animation that you 
don't end up using! 
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Part 2: Scripts and timings 


An animatic will help you to get your comic timing right... 


forking out a script mi e viewed as overkill fora 
short Web cartoon, But it can help you to decide on the 
timings of the final production. A lot of Web cartoons 
wuld have possibly been better with less dialogue! Working out 
reco it, importing it, preparing it and then adding it 


Once you've put together your script, go over it again 

and ask yourself if the dialogue is really necessary. Can 

the point be better shown through animation alone? A 
good rule of thumb is to never say with words anything that could 
be animated instead — that way it comes across more naturally. 


Break down your script into scenes that tie in with your 
storyboard. Attach the dialogue to the storyboard 
s 's to make things clearer if you like. Enlist the help 


of a frien d, with one of you using a stopwatch of some kind 
read the part out loud in the way that t haracter would do. 
Note down the timings next to the pieces of dialogue 


note of how long animated action is likely to 
is, added to the dialogue timings, should begin 
to give you a sense of how much time you need to allow 
for each scene. Keep a close record of all of this so that changing 
anything later on can be adjusted along the complete timeline 
without too much grief. 


‘Ananimatic is a series of still images, where each 
image is placed ona timetine inthe correct order and 
stays on screen for the correct amount of time needed 
ra particular scene. At first, an animatic can seem a 
cumbersome thing that's hard to appreciate. However. working 
hit is askillthat really helps as you begin to animate properly. 


We prefer to use Apple’s Final Cut Pro 3to create our 
6 | animatics although there are many ways to achieve the 

same results. First of all, we scan all of our storyboard 
sheets into the computer and import them into the application 
(FCP). When working with storyboard sheets it’s very possible 
that you'll be working with a large number of files when scanned 
in. Make sure you keep a tight rein on the naming convention you 
choose or you could end up spending hours looking at all of the 
scans and renaming them accordingly, which will be only slightly 
quicker than re-scanning! 


Once all the storyboard s! $ are imported (scanne 


using a non-linear editor like FCP really shines through 


You could do the same job in Flash if you like. However, 
E} Flash isnt really built for this job and large images such 

as full A4 sheets can become quite cumbersome to 
work with in Flash, especially when it comes to outputting the file 


¢ okay. But, regardless of all this, it’s fine to 
use Flash to produce your animatic. 


Sequence Effects 


application you've decided to use, it’s time to export it. 


9 | Once everything is placed on to your timeline, whatever 
This will obviously depend on your choice of 


application. But. once that's done, you can view the first rough 
version of your cartoon with all the correct timing in place. 


Tools Wi 


Once you've finished all the animation bits, added a 

rough soundtrack for both the music and dialogue (plus 

any incidental sounds too) and you’re happy with the 
Tough version, it's time to start on the real animation. But your 
job will now be much easier because you've already ‘rehearsed it 
with your animatic. 


is is also a good time to start adding the music for the 
animation into the rough version. Fitting in music with 
dialogue can be a tricky thing to do, and experimenting : 
with it now will allow you to adjust things as needed. ; 


As you finish animating new scenes and adding them to 

the animatic, you should be able to see a finished 

‘rough’ coming together. All the major animation houses 
that we've worked with use a process like this, or very similar. It 
really gives you a sense of how it's all going and how closely 
you're sticking to the storyboard and script. 


Import the file into your app and then replace the 

picture from the storyboard on the timeline. If 

everything is right then it should fit exactly in the space 
you allowed forthe original storyboard scene. You can now re- 
export, and check the animation is holding together as planned 


Having completed a scene, you can add it to the 

animatic as well as keep it for the final build. Export the 

scene in a format that can be added to youranimatic. For 
instance, in Flash you could just cut and paste the frames, but if, 
like us, you use a non-linear editor such as FCP then you'll need to 
export a movie sequence that you can import into that app. 


If that's all sorted, you can now start to build up your 
13 animation in Flash properly. The way you've built up 
everything so far will make this task that much easier. 
For instance, if your opening shot takes 10 seconds and your 
movie is running at 15fps then you need to allow 150 frames on 
| the Flashtimeline forthis scene to happen. Once you've 
animated the scene, export it and check that it runs forthe 


amount of tim 


You could even record a rough audio track to lay down 

in your editor too, This will save you having to speak the 

part too many times. It'll also give you an audible 
reference to keep track of the timings in other scenes so as to 
avoid different tempo and speed between scenes. 


Does your story still make sense? Does it work as a Once you've viewed the whole thing to make sure it's all 
story? A lot of the time you might find that laying it out there, have another run through it. This time, however, 
like this will make the story seem wrong. And if it read the dialogue out loud again to make sure you have 
doesn't work now then it won't work in the final version. Now you really allowed enough time for the speech to run naturally. This is 
| know why films of books are totally reliant on screenplay artists. a tough task the first few times you do it b se it's easy to 
speak too quickly and not allow enough time, or speak too slowly. 
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Illustration; Jon Burgerman [w] www.jonburgerman.com 


SECTION FOUR 


Bringing your 
character to life 


Give your character the ability to walk and talk... 


F aking a character walk properly in 
y an animation is a simple matter of 
, dynamics and timing. By now, you 


should have realised that a lot of technique 


in animation comes from observing real life. 


Walk cycles are no different — just look at 
the people around you and watch them walk. 
The same goes for speech — there are 
certain shapes the mouth makes, so just 
watch people and copy what you see. > 
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Part 1: Your character's first steps 


Create a walk cycle to get things moving... 


Pixel perfect 


In Flash MX use Pixel-Level 
Snapping. If you zoom into a 
movie sufficiently, a 1x1 pixel grid 
automatically appears enabling 
you to manually move objects into 
place with pixel perfect accuracy. 


rt | Walk cycles have to be broken down into 
logical chunks that look right to the human 
eye. Flash has some facilities built in that make 
animating walk cycles a little easier, like using 
symbols and loops. 


4 | Open Flash and start a new document. The 
first thing you need to do is establish the 
ground level. To do this, select a conspicuous colour 
(such as red or bright green) and draw a line, 
straight across the stage near the bottom edge. 


Make sure you take into consideration the 

effects that gravity would have on your 
character. His hips, body and head will be below 
their normal level. As the cycle develops, you'll be 
moving them up again. 


We're going to create a walk cycle where the 

= person walks in-situ first of all, and then we'll 
create a symbol that can be animated across the 
screen to simulate a person walking from one side of 
the screen to the other. 


To prevent this line from being selected or 

moved during the drawing, lock down the 
layer. Then add another layer above this one by 
clicking on the Insert Layer button. This forms your 
main working layer. 


8 | Now add a new blank keyframe at frame 2 
(Insert>Blank Keyframe). We'll add the 


intermediate frames at the end. To draw the second 
part of the cycle, you're going to need to see the 
first step. 


First of all, decide how many frames your cycle 

is going to take. For this example we're going 
to create an eight-step cycle on ‘twos’. This means 
there's a keyframe every other frame so that the 
whole sequence will take 16 frames. 


G piece of the cycle. It's no use drawing a 
character that's simply standing still, because 
when you loop the animation it won't work. So, 
for frame 1, draw the character with his front leg 
striding forward. 


Flash has a feature that allows you to see 

any number of previous or following frames 
super-imposed onto your working frame. It's called 
Onion Skinning and in traditional animation is a 
hard skill to learn. 


Edit symbols 


To isolate the symbol in its own 
editor, right-click in Windows or 
Ctrl-click on the Mac to bring up 
the context-sensitive menu. 
Choose Edit. 


Outline Mode 


Another way to visually isolate 
individual elements is to turn 

on Outline Mode. Go to 
View>Outlines. Everything on the 
stage is rendered as outlines only, 
with colour coding that you can 
edit by going to Modify>Layer. 
Individual layers can be set to 
Outline view from the Outline 
column in the timeline. 


10 | To turn on this feature you'll need to click on 
the toggle button at the bottom of the 
timeline. There are four separate buttons that you 
can choose from: Onion Skin, Onion Skin Outlines, 
Edit Multiple Frames and Modify Onion Markers. 


peg Next, insert another Blank Keyframe on frame 

3. You should be able to see the previous two 

frames superimposed now. Carry on and do this for 
all eight parts of our walk cycle. 


a = 

Once you've done all eight frames, you need 

to insert some blank frames in between the 
keyframes. So, select frame 1 and then go to 
Insert>Frame. This puts in the new frame and then 
shoves the others along the timeline accordingly. Do 
this for all eight frames and make sure you 
remember the last one. 


We're going to use the first one, Onion Skin. 

Click on the button (it toggles, so click it again 
if you want to switch it off) and you should 
immediately see the first frame you drew 
superimposed onto this frame. 


You can adjust the number of frames that are 

Onion Skinned by dragging the boundary 
markers along the timeline. This way you can see 
more, or less, of the frames either side of your 
working frame. 


@ Now select all the frames along your timeline 
17 are ' f 
by clicking and dragging your mouse until 
they're all selected. Then right-click (Ctrl-click on the 
Mac) on any one of them and select Cut Frames. 


| , 7 7 1) ————=B (oem) 

You can now use this to guide your second 
drawing. So go ahead and do just that. 

This time, draw your character following through 

from the first frame. Again, bear in mind the gravity 

thing as mentioned in step 7. 


15 Alternatively, you can use the Modify Onion 
Markers button to set the amount of frames 
you can see. This means it stays permanent until you 
manually slide them or re-set the default again. 


| 
Click on Insert>New Symbol, select Movie Clip 
and call it ‘walk’. Then click OK. You'll be 
taken into the editing screen. Right-click (Windows) 
or Ctrl-click (Mac) on the timeline and select Paste 
Frames. Go back to your main stage, open your 
Library folder and drag an instance of your new 
symbol onto the main stage. Test your movie! > 
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Part 2: Moving other limbs 


Get your character to wave at the audience... 


Get-out clause 


When you go to Symbol Editing 
mode or switch to another scene, 
Flash MX displays a link back 
through the preceding screens at 
the top left of the document 
window, enabling you to quickly 
return to the main screen. 


A common trick employed by animation studios 
rt | To make your character move effectively, is to add devices like a high collar or cuffs. Animation can be very time-consuming, so 
you'll need to break it up into logical pieces Remember Yogi Bear's neckerchief? Well, that most animators will resort to methods that 
(like we did in the ‘Creating your own cartoon enabled easy swapping out and movement of body reduce the amount of unnecessary work. Flash's 
character’ section earlier). parts and prevents you from having to fillin too much. _ motion-tweening feature can seriously help with this. 


visa] 


G Let's make the character wave at the viewer. 

=_— - — . - This might be a good time to start using layer You need to adjust the centre point of the arm 

Open up (or create) a file where you have your folders too. This way you can keep all the parts symbol that's going to wave. Select the symbol and 

character already broken up into bits. And on of your character together, which is especially useful _ right-click (Win) or Ctrl-click (Mac) on it. Select Edit 

the main stage, put it together making sure you if you're animating more than one character on the In Place and you'll be taken into the editing screen. 
keep the separate parts on different layers. stage at any time. The rest of the main screen also remains visible. 


9 | Insert a new frame at frame 5 on all of the 
layers in your timeline (Insert>Frame or right- 
click on the actual frame and then click on Insert 


Group the drawing if it hasn't been done 
before by selecting everything and then 


Modify>Group. Then with the new grouping 8 | Now go back to the main stage. You'llneedto Frame). Click on frame 5 of the layer where your 
selected, move the object so that the centre point is re-position your symbol because changing the arm symbol is, and insert a new keyframe 
positioned at the axis of any intended movement. centre point will have moved it out of place. (Insert>Keyframe). 


Shortcuts 


Use the Edit>Keyboard feature to 
create key combinations that 
enable you to quickly switch 
between the custom panel 
layouts that you've created, You'll 
find it under Flash>Keyboard 
Shortcuts on the Mac. 


Remove panels 


When all the panels in your 
layout are floating, you can 
quickly banish them by hitting 
the Tab key. To bring them back, 
press ita second time. 


Right-click (Ctrl-click on the Mac) on any of 


10 | On the main stage, select the arm symbol | the frames between 1 and5 on yourarm’slayer py Repeat step 9, but this time insert the new 
and click on the Free Transform Button on and choose Create Motion Tween. This enables Flash frames at frame 10. Do the same for the new 
the Tools palette. Rotate your arm by about 30 to insert the frames between the first and final Keyframe on the arm symbol's layer too. Now go 
degrees downward, so that the arm is stretched positions of the arm. Scrub the playhead over the back to frame 1 and copy the arm symbol (select it 
out sideways. timeline to see it working. and then Edit>Copy). 


Delete the instance of the arm symbol at 


frame 10 and then paste the symbol from Now right-click (Ctrl-click on the Mac) on any Test your movie (Control>Test Movie) to see 
frame 1 in its place (Edit>Paste in Place). This is a frame between 5 and 10 on the timeline on the character waving at you. Cool huh? It 
handy feature in Flash and it ensures that your the arm symbol's layer and choose Create Motion looks a little mechanical though, which is fine if your 
new symbol instance is in the same place on frames Tween once more. This puts in the extra frames character is a robot, but not if it isn't. So let’s make it 
1 and 10. needed to return the arm to its starting position. a bit more natural. 


Now click on any frame between 5 and 10 and 
—_—_—___—— - set the ‘Ease’ slider to about 90 again. Test the 
Close your test window and go back to your Next to ‘Ease’, move the slider upwards to movie (Control>Test Movie) and watch the results. 


main stage. Click on any frame between 1 and about 90 (Ease Out). This makes Flash re- The wave should be a little more natural now. You 
5 and have a look at the Properties panel. We're calculate the frames so that the movement is fastto can move any part of your character's body using 
going to make the wave become more natural by start off with and then slows down as it gets to the these techniques. Just remember to plan it out and 
speeding up and slowing down the tweens. end of the sequence. test regularly to make sure it looks right. > 
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Part 3: Animating your character's face 


Make a library of facial expressions and mouth shapes... 


Quick animation 


Quickly place individual 
characters on different layers by 
selecting the text object and 
choosing Modify>Break Apart. 
When applied to text, this 
function divides the object into 
separate letters rather than 
shapes in Flash MX. With the 
characters still selected, 
choose Distribute to Layers. 
Each character can then be 


separately animated. 


ie oo sian, ($504 900 pres) eacgroune [ 
Iaaueh marvarne Pettin, (_ fash Payers 


rae tase: "22 fon 


To convey a real sense of your character 

speaking, it needs to be prepared in a certain 
way. You need to break up the head into separate 
symbols as you did earlier with the body. 


Sine: (950% 400 putt) 
mover Pao: (“Poh Payer 6 


tacrgeoned. [") 


G A closed mouth, an open mouth, a mouth in 
an ‘ooo’ shape and possibly a half-open 
mouth will be enough to portray most speech. 
Any more than this and it probably won't be 
noticed anyway. 


‘© mouth mavements_2.fla:1 


Eyebrows, eyes and mouth all need to be 
separate. If you watch someone speaking, 
notice how their expression changes with their 
speech. A person's expression is as much a part of 
communication as the content of their words. 


1. 


Let's get the mouth shapes organised then. 

Open Flash and start a new document. To 
begin with, draw your basic head shape and face 
onto the main stage. 


==3 insert Keyframe 
insert Blank Keyframe 


Convert to Keyframes 
Convert to Blank Keyframes 


Paste Frames 


Select All Frames 


With all of your components in the library, 

delete everything from the main stage in Scene 
1, Now drag the head/face back onto the stage and 
insert a new frame at frame 5 on the timeline. 


Lock down this layer and then add a new layer 

above it. This is where we're going to draw all 
the different mouth movements. Drag the existing 
mouth from the library to the stage and place it in 
the correct position. 


Site, (5500400 pines | tackgrouna: [,) frame Rate: [72 fps 


moverne.,. Publish | last» Player 6 


You need to draw a few separate mouth 

shapes too. You can get away with less that 
you probably think — you only need about four 
separate shapes. 


Sexpert for Actionscript 
export for runtime sharing 
SD import for runtime sharing 


Now select the different areas of the face and 

convert them into Graphic symbols as you go 
(Insert>Convert to Symbol). Leave the actual head 
until last, because you'll probably need to fill in the 
areas where the other bits were. 


Insert Frame 


Insert Keyframe 


Convert to Blank Keyframes y 


py Frate 
Paste Frames 


Select All Frames 


Now add a blank keyframe at frame 2. With 

the head/face locked down you'll be able to 
draw the next mouth shape in place. Draw an open 
mouth shape this time and when you're done, select 
it all and convert it into a Graphic symbol too. 


Reuse actions 


As wellas calling named 
functions, you can also call the 


script content of a specific 
keyframe in Flash MX — this 
enables you to store reusable 


ActionScripts in sections of 


your movie and callon them 


when required 


Now you should have all four mouth shapes as Create a new layer above your last layer in 


Add a blank keyframe at frame 3 and draw individual Graphic symbols in your library. your Flash movie and double-click on the 

another mouth in the ‘ooo’ shape. Again, We're ready to work out our first lip-sync animation. name (probably called layer 3) and rename it 
select it all and convert to a Graphic symbol as Start by deleting layer 2. You don't need this ‘Sounds’. Later on when you're developing more 
before. Do the same for the half-open mouth anymore now that you've drawn and converted the complex cartoons it’s advisable to add a sound 
shape afterwards. mouth shapes. layer for each sound. 


Part 4: Getting the lip-syncing right 


Import sound files and make sure the sounds match the mouth movements... 


New From Template... 
Open. 


eo es ee 8 Se ee 


1 —) 


1 | On frame 1 of your new layer, import a sound — 7 . 7 You can set the sound property ‘Sync’ to one 

file (File>Import to Library). Importing it @ Select frame 1 of your Sounds layer and look at of a number of options. The two you'll 
straight into the library makes it less confusing when the Properties panel. Click on the Sound drop- probably use the most are Event and Stream. For 
you're working on complicated timelines. down and select the sound file you just imported. this example we're going to use Stream. 


Effect: 


Sync: — BB) Loop 0 | times 


44 kitz Stereo 16 Bit 0.4 6 63.7 kB 


b : - 
4 | Stream synchronises the sound for playing on 

a Website. Flash forces animation to keep pace 15] Make sure that Loop is set to zero. We don't - - 
with stream sounds. If Flash can't draw animation want the audio file to repeat after the 6 | On the timeline, you're going to need to allow 
frames quickly enough, it skips frames. Unlike event animation has finished. Although, if you later add a enough frames for the sound to finish playing. 
sounds, stream sounds stop if the movie stops. Also, _ background track that has been designed to loop for _ So, if your movie is running at 15fps and the sound 
a stream sound can never play longer than the the duration of a scene then you would set the lasts for three seconds, you'll need to insert a new 
length of the frames it occupies. amount of loops here. frame on your Sounds layer at frame 45. > 


Tutorial Bringing your character to life | 47 


| Tutorial Bringing your character to life 


Getting the lip-syncing right continued... 


Common symbols 


Create folders to store common 
symbols together to make them 
easy to track in complex movies. 
You may want to create separate 
folders for text, bitmaps, buttons 
and so on, or it may be more 
valuable for you to place all the 
parts that went into the creation 
of a specific clip in one folder. 


However long your sound lasts, make sure you 

match the number of frames on the layer that 
contains the basic head/face. If you don't do this, 
your head will disappear before it's finished! 


Copy Frames 
Paste Frames 
Clear Frames 
Select Ail Frames 


Edit Symbols 


To make the mouth move in time with the 

sound, simply add a new keyframe on layer 2 
every time you need to change the mouth shape. 
It's easier to cut and Paste in Place from earlier 
frames once you're a little way into the piece. This 
makes sure the mouth stays in the same place. 


‘al i Feome 


| 

Another thing you can do to your talking 

animation that can make a big difference is to 
make the character's eyes blink. You can use 
blinking to accentuate the speech too, and also to 
add more personality to your character. The longer 
the blink, the ‘slower’ your character will be - think 
of Droopy! 


= mouth movements_2.fla:2 


8 | If you scrub the playhead along the timeline, 
you should be able to hear your sound. This is 
key to working out the mouth shapes needed. 
Listen very carefully to the sounds of the speech 
and try to work out what shapes the person's mouth 
will be forming 


11 | When you've finished putting in mouth 
movements to the sound completely, test your 
movie to see how it works. If it’s out slightly, don't 
worry — it's pretty simple to just move a frame along 
a little bit to sort it out. 


j 

14 It can be fiddly, but slightly moving the head 
when the character's speaking is also a good 

way of creating a more engaging animation. It's 

even more important to add this kind of movement 

in a monologue situation. Just watch the news 

readers on your telly -— they move their heads into 

funny angles all the time. 


Loop 0 mas 
44 btn Stareo 16 00.4 63,7 48 


‘om 3 
° 


9 | As a general rule, you should open the mouth 
on hard consonants and vowels. During a 
single word, the mouth won't generally close except 
to initiate hard consonants. It's quite a leap, but you 
need to try and work out the ‘shape’ of the word 
rather than focusing on each syllable. 


a8 


EEBEEEEE 


Now you've put it all together, it might be nice 

to finish off the animation with some facial 
animation and expression change. Again, there are 
some basic rules you can follow with this. For 
instance, when someone makes an ‘ooo’ sound, 
generally their eyebrows will raise. 


15 | Learning how to lip-sync just takes time and 
practice. Use a mirror when you're drawing 
and be really aware of others when they speak. 
Watching TV is also good for this one. Seeing 
popular animations from the perspective of an 
animator will throw up some surprises. EEE 
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SECTION FIVE 


Adding sound 
to your animation 


Find out how to capture, import, slice and edit 
WAVs, and create a Sound Object for more 
control over your audio clips... 


yT he addition of audio to an animation actions more understandable and 
f 


brings much more than an believable to the audience. 

enhanced multimedia presentation. With a little understanding of how to edit 
Sound effects provide subliminal depth to a your source WAV or AIFF files, you'll greatly 
character and its environment, making improve the end result of your animation. > 
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Part 1: Working with WAVs 


Use Cool Edit Pro to create and edit your own ambient sound effects... 


— 


Original WAVs 


Although you can find many WAV 
files available for download, 
you'll probably become 
increasingly frustrated hunting 
around for the perfect sound that 
either doesn't exist or suffers 
from poor quality. As a visual 
designer you're probably used to 
carrying a digital camera around 
with you, so why not use the 
same principle with audio by 
taking something like a minidisk 


recorder along with you too? 


Our background sounds will combine city 

ambience and birdsong to give a suburban 
feel. Open the birds.wav and traffic.wav files in 
Cool Edit and use the identifiable playback controls 
to preview the sounds 


VSEUEEERZ SE * 


Click anywhere to remove the selection. Where 

the wave is flattest the sound is at its quietest 
Therefore make a selection toward the end of the 
sound and select Transform>Amplitude>Envelope, 
recreating the fade envelope above before clicking 
the OK button. 


As the reduced amplitude flattens the 
waveform there are less peaks within the 
sound to complicate the loop. Use the Play Looped 
option to preview the effect with the current wave. 


rarstom Gereiete Analyze Favortes Optors Wedow Heb 
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The birds.wav file suffers from a little noise. 
Using the Transform menu (which can be 
likened to Photoshop's filters) find the Noise 
Reduction>Hiss Reduction option and choose the 
Standard Hiss Reduction preset before clicking OK. 
Play the file again to notice the difference. 


BEBE SEE 0:00.00 


5 | Save the file and open the traffic.wav file. The 
challenge here is to create a smooth loop and 
to make the sound a little more distant so as not to 
obscure any foreground effects you may ultimately 
add to your animation 


In theory we could leave things as they are, 

but for Web delivery the 1MB+ file size is 
impractical. Instead use the Play Looped option to 
experiment with shorter segments. We settled with 
a selection between 7.4 to 9.6. 


birds.wav* - Coot -_" 
ww Transform Generate Ansiyze Fi 


The last instance of the sound is noticeably 

clipped, but we can mask this with a subtle 
fade. Select the last repetition of the sound by 
clicking and dragging, then click the Zoom to 
Selection tool so we can make a more accurate 
selection for our correction, 


G First, lower the levels via Transform> 
Amplitude>Amplify and, keeping the Constant 
Amplification tab to the fore, select the 6dB Cut 
preset to reduce the volume of the clip and provide 
amore distant result. Click OK. 


Fie Edt ew Transform Generate Analyze Favertes Qptons Window Help 


With the selection highlighted, use the 

Edit>Paste to New to create a new file from 
your selection. Save this as background.wav and 
you'll see the reduced file size is much more suited 
for the intended medium. 


Part 2: Slicing WAVs 


Create short sound instances for use with specific Flash events... 


Multitracking 
WAVs 


Using the WAVs you create 
through this and the previous 
page, you can switch into Cool 
Edit’s multitracking mode via the 
appropriate button contained in 
the top left of the interface. This 
takes you into a more flexible 
environment for creating and 
mixing more complex 
combinations of sound clips than 
is possible through the default 


single Waveform editing mode. 


a The sounds we previously worked on were to 
provide background ambience to our 
animation. However, our character's movements 
will need similar sounds available within the Flash 
library to place our figure into its environment 
realistically. A good example of this would be the 
sound of footsteps 


Bie Est Wen Transform Generate analyze Favogtes Gntone iindow | aap 
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Remember to make use of the various Zoom 

tools if it's not clear from the overall view of 
where a sound's start and end points are. Here 
we've made an approximate selection around the 
first step and used the Zoom to Selection tool so we 
can trim the waveform more precisely. 


You could do the same thing to our original 

birds.wav file converting the individual sounds 
into their own files. The resulting .wav file would be 
tiny, averaging less than 10KB, and allow you to 
make more random instances of the birdsong 
throughout your final animation. 


FEI VEY 0:00.455 


2 aw the steps.wav file in Coo/ Edit and play 
back the file. Notice how there's a clear 
distinction between the sounds made by each foot. 
Ignoring the outer steps, the centre of the wave 
contains two pairs of steps we can use to make 

individual sounds. 


Analyze Favogtes Qptions window tield 


Delay Effects 
Filters 

Noise Reduction 
Speaal 

Time Pitch 
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G For the best quality you may want to consider 
running similar transformation effects such as 
noise reduction and fading the end of the wav 
through the envelope as we did previously to create 
a cleaner and more self-contained file. 


rt Sample 


‘onvert from 11025 Mono 16-bit to: 
Sample Rate Conversion Presets 


% 


000.000 


Our mono birdsong is balanced equally 

between the speakers. If you want to bias this 
toward the left or right speakers, use the 
Edit>Convert Sample Type option and select the 
stereo option before clicking OK. 


ransform Generate analyze Fa 


topped 
Using techniques we covered earlier select the 

first instance and use the play button to 
preview our selection. If you're happy with the 
beginning and end of the clip, use the Edit>Paste to 
New option and save the file as left1.wav. 


Folders fay 


x Name « Type 

~~ (@) left. wav WAV Audio 
@)left2.wav WAV Audio 
(@) right1.wav WAV Audio 
@) right2. wav WAV Audio 


G Returning to the original steps.wav file, run 
through the same process to create the 
remaining three steps to leave us with left1.wav, 
left2.wav, right1 .wav and right2.wav. Having some 
variant sounds in this way allows us to provide a less 
regimental walk. 


dit ew [Transform Generate Analyze Favogtes Qptont yyindow 


This shares the waveform between the two 

channels (left and right) from where you 
can adjust various settings through the 
Transform>Amplitude settings if you so require. 
However, as many similar effects can be run from 
within Flash, this is probably too advanced for 
our needs. > 
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Part 3: Sounds of the suburbs 


Importing and using our edited waveforms to form our audio environment... 


Flash envelopes 


You can see here why we edited 
the original wave files ina 
dedicated editor such as Cool 
Edit Pro. Flash has basic control 
over the amplitude and stereo 
positioning of an audio clip but is 
no tool for actually optimising or 
amending the clip. Understanding 
the basics involved in waveform 
editing, however, is a great 
advantage for a Flash designer, 
improving workflow and 
expanding potential. 


=| RNS ANS SST SESE ITE; SE. TE. 


1 | We need to add background audio ambience 
to the morning. fla file in Flash. Open this file 
and familiarise yourself with the components 
currently in place. The animation is a continuous 
loop so any audio elements will have to reflect this. 


As our animation runs around a continuous 

loop, we need to ensure the audio track will do 
the same. With the audio frame selected, use Flash’s 
Properties panel to set the sound sync to Start with 
a high loop number. 


Our audio is still too prominent to act as 

background ambience. With the audio layer 
selected, click the Edit button by the Effect options 
on the Properties panel to prompt the Edit 
Envelope dialog. 


Create a new layer, name it audio_traffic and 


drag this to the top of your layers. Next, choose 


the File>Import to Library option and locate the 
background.wav file we previously created before 
clicking Open. 


C2 Apa 2003 arses 
“Ad kHz Mono 16 Bit 29 s 259.8 KB 


To improve the audio quality when we export 

the movie, right-click (Windows) or Ctrl-click 
(Mac) the waveform in the Library panel and choose 
the Properties from the contextual menu. Choose 
the ADPCM compression method opting to convert 
to mono, 22KHz sample rate at 4bit. Press OK. 


8 | If you followed the steps creating our original 
waveform using Cool Edit Pro, you should be 
familiar with the concept of editing audio 
envelopes. The waveform is split into left and right 
channels with amplitude (volume) determined by a 
horizontal line along the top. 


With the first frame of the audio_traffic layer 

selected, drag the background.wav library 
instance anywhere onto your movie. If you were to 
create additional frames, you'd see a visual 
representation of the waveform in the timeline 
giving some idea of how long into the animation 
your sound will run. 


G Test the movie and you'll find your exported 
SWF has much higher audio quality than the 
default setting with only a marginal increase in file 
size - we managed 41KB compared with 18KB, 
although our audio quality was comparable to the 
original 254KB wav file. 


a With the amplitude at the top, the sound is 

at its loudest scaling down to silence if moved 
to the bottom. Using the square handles, drag 
down the lines to around a quarter of the volume 
level. Use the Play control at the bottom to preview 
your edit. 


Audio compression 


You'll find many occasions when 
the default Flash audio 
compression is too destructive to 
a sound. You can choose 
alternative methods by entering 
an audio clip’s properties 
(through the Context menu) to a 
library item, but keep in mind 
that although better quality is 
possible through different 
compression, this will invariably 


lead to increased file sizes. 


+ Timeline 


10 | The sound should now begin to sound more 
like distant traffic, so click OK to return to 
editing the Flash file. Create two new layers naming 
them audio_birds1 and audio_birds2, and move 
underneath the one containing our traffic audio. 


Right Channel 
Fade Left to Right 
Fade Right to Left 


You can further add to the random effect by 

choosing left or right channels for individual 
sounds or using the Edit Envelope tool we looked at 
previously to position the sound arbitrarily between 
the speakers. 
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16 | For a random traffic background effect add 
another layer and name it audio_traffic2. 
Create a new Movie Clip and use the same 
principles used for the birdsong but leave enough 
frames between occurrences for the waveform to 
play through. 


KE birdsi.wav 
KE birds2.wav 


11 | Import the bird clips we made earlier and create 
two new Movie Clip objects in our library with 
corresponding names to the new layers. To make the 
background birdsong seem random we're going to 
create unequal loops within the Movie Clips. 


14 | Repeat the previous two steps to create the 
audio_birds2 Movie Clip but, importantly, 
specify a timeline that is unequal in length to the 
previous clip. Again, use random keyframes, sounds 
and stereo positions to make a more natural effect. 


Next, select the keyframes individually and hit 

the Edit button to adjust the sounds envelope. 
Replicate the amplitude set by the envelope above 
to give the effect of passing traffic, and experiment 
with alternatives for the other clip instances. 


se aur backs 


Open the audio_birds1 Movie Clip symbol and 
increase the timeline to frame 200. Create 
random keyframes attaching random bird sounds to 
each. Play back the clip making adjustments where 
necessary and loop the clip by adding a 
gotoAndPlay(1) action in the last frame. 


ba 
With our clips created, return to the main 
scene and place instances of each onto their 
corresponding layers. Test the movie and you'll 
notice the clips are indistinguishable from each 
other and the conflicting timeline lengths mean any 
discernable loop is lost. 


18 | You can achieve a similar random effect by 
copying the uneven timeline principle we 
used for the birdsong and adding another Movie 
Clip onto a separate layer. The end result creates 
realistic background audio that helps build and 
establish the scene. » 
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Part 4: Creating a Sound Object 


For more control over audio clips throughout your movie, you'll need the Sound Object... 


Method ranges 


With a Sound Object created, 
you have better control through 


ActionScript to various elements 
of an audio clip's playback, which 


we've illustrated here using the 
Volume and Pan (stereo 
positioning) controls. The 
numeric parameters in these 
cases vary depending on the 
method; for example, Volume is 
graded along a scale of 0 to 100 
(silence to full volume) while 
Pan ranges from -100 to 100 for 
the full range between left and 
right speakers, 


it View Insert Modify Text Control Window Help 


+ Timeline 


i Go back or revert to the original morning. fla 
file to apply the audio using this alternative 
and more flexible method, and create a new 
‘actions’ layer and select the first frame. 


Bring the background.wav file we created 

earlier into the file and locate your imported 
sound in the library. From the object's context menu 
choose the Linkage option. 


The parameter will refer to the imported audio 

clip we imported, so enter the variable name 
of ‘traffic’ we provided making sure to enclose the 
name in quote marks so Flash can recognise it as a 
literal name instead of an expression. 


To create a global Sound Object, open the 

Actions panel and choose Actions>Variables>Set 
Variable and enter a name for our background sound; 
we've settled with ‘mySound’ as a label. 


In the alert box that appears for the Linkage 
Properties, provide a suitable identifying name 
for your clip, such as ‘traffic’, and check the Export 
for ActionScript box. This makes the audio clip 
recognisable to ActionScripting. Click OK. 


You can continue to create similar Sound 

Objects for your various bird wave files, 
allowing these objects to become available through 
scripting and attached to actions — for example, ina 
more flexible way than embedding specific 
instances as we did previously. 


Next, click in the Value field and browse 

through the Actions to find the 
Objects>Movie>Sound>New Sound and double- 
click to add to your variable, Check the Expression 
box by the Value field. 


ctions - Frame 


samen = so IE USE NERS AERIAL 


‘Actions for Frame 1 of Layer Name actions 


G With the linkage created, we can now return 
to our script to associate the audio with 

the Sound Object. To do this, select the Sound 
Object and attach the sound via Objects> 
Movie>Sound>Methods>attachSound referring to 
the ‘mySound' Object. 


myButton. ase = function() { 
]]__ mySound. setVolume (29); 


@® oxcvoune 
@ oodsound 
@ wren 
@ settransioem 
@ swvoune 
@ an 
@ xp 
Properties 
Events 


9 | As an example, we can easily reference our 
Sound Object as we've done here through the 
release of a button click with specific attributes, such 
as volume and its stereo positioning. Look through 
the Objects>Movie>Sound>Methods options to see 
what's available. FEES 
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Tutorial Interacting with characters and objects 


Illustration: Jon Burgerman [w] www.jonburgerman.com 


Int cti ith 
Make objects interactive and create buttons to 
control character movement... 
é ne of the best things about using In Part 1 of the following tutorial we 
fo Flashto make and distribute your show you how to animate an object, in this 

cartoon is the ability to allow the case a dustbin with the lid falling off. Then 
audience to participate in the action. in Part 2 we give you a step-by-step guide 
Creating rollovers and buttons that show the to linking actions to button clicks so that 
viewer something important or let them make your audience can control the movement of 
choices is unique to Flash and Web delivery. your character. > 

— 
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| Tutorial Interacting with characters and objects 


Part 1: Interacting with objects 


Create a piece of the environment that your character can interact with... 


Stage manager 


Flash MX enables you to directly 
control the size of the current 
movie with the stage.height and 
stage.width commands. 


Load Movie 


The Load Movie command 
doesnt just work for movies, it 
can be called within Movie 

Clips too. You can use this 
knowledge to replace Movie 
Clips on the stage dynamically — 
load ina new SWF format clip 
from an external source in 
response to user actions or 
events in the timeline. 


Let's make part of the scenery do something as _— . 
the mouse rolls over it. Open up Flash and For now, let's just create the element that 


animates when the mouse rolls over it. You can 
then use this method in your cartoon work 
wherever you like. We've drawn a dustbin, but you 
can do anything that might have a similar action. 


start a new movie. As is always good practice, save 
the movie straight away. Saving is an easy thing to 
do with keyboard shortcuts, and will hopefully 
prevent you from losing work. 


Just like in the character design section, we've 

broken our dustbin up into usable bits. In this 
case, alid, the contents and the main bin. Turn all of 
your bits into separate Graphic symbols. 


Double-click on your new symbol and you'll be 

taken into the editing screen. Make sure you 
once again select all of the elements on the stage. 
We need to put them all onto separate layers so that 
our animation can be kept ordered. 


4 | On the main stage, put them all together to 
make up the object properly. Then select them 
all (Edit>Select All) and turn them into a Movie Clip 
symbol (Insert>Convert to Symbol). 


Now let's animate the lid falling off the 

dustbin. Select the layer that holds the correct - : — — 
symbol and insert a new keyframe 3 | Select your lid on frame 2 and move it a little 
(Insert>Keyframe). Flash will then insert a new as if it's starting to fall off the dustbin. You can 
keyframe on frame 2 and also insert a new frame use onion skinning here if you want to check the 
(not keyframes) on the other layers. amount of movement you need. 


Sioa Symbol 
Duplicate Symbol, 


Sway Sitmap 
Trace Bitmap, 


To do this, with all the elements selected, click 

on Modify>Distribute to Layers. Flash then 
puts each element on its own layer saving you the 
time of having to do it manually. It also names each 
layer after the symbol name. 


Flash file Edit" View Insert Modify Text Control Window Help 


Click on the Onion Skin toggle button at the 

bottom of the timeline to turn it on (and click 
on it again to turn it off when you need to). You can 
drag the onion skin markers to show as many 
frames as is helpful. 


Stop that movie 


Remember that Movie Clips loop 
by default. That means that you'll 
need to put a Stop action in both 
the first and last frames unless 
you want them to loop forever in 


your movie... 


Using bookmarks 


As wellas placing labels in 
movies and Movie Clips, you can 
now put bookmarks in Flash MX 
authored movies. These enable 
your users to click on the back 
and forward buttons of their 
browser to revisit sections of 


your movie. 


| @ Flash File Edit View Insert Modify Text Control Window Hel 


| @ Flash File 


Edit View 
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10 | Repeat steps 7 and 8 for as many frames as 
you need to. When you're animating this 
remember to keep it looking natural. Allow for the 
speed of something dropping and quickening as 

it does so. 


Free Transform 
Seale 

Rotate and Skew 
Distribute to Layers 


Unfortunately, it does just that. Play, that is — 

continuously! So you need to add some 
actions to the Movie Clip so that it doesn’t do that 
Close your test movie and go back to the Movie Clip 
editing screen by right-clicking on the instance of 
your Movie Clip symbol and choosing Edit In Place. 


| Check Syntax 
Show Code Hint 


Auto Format 
Auto Format Options... 


import From File. Ow! 
Export As File 8X 
Print... 


View Line Numbers O€L § 
View Ese Shortcut Keys 


Preferences... 


Help 
| Maximize Panel 
| Close Panel 


16 We're only going to be adding basic actions to 
our movie so we'll enter them by hand. The 
Actions palette has two methods of entering code: 
Expert and Normal. If you're in ‘Normal’ then click 
on the icon to the top right of the palette and select 
‘Expert’ instead. 


11 | Once completed, scrub the playhead indicator 
over the timeline to see your dustbin lid (or 
whatever you've decided to draw) fall off the 
dustbin and back on again as you scrub back. 
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14 | Add another layer (Insert>Layer) above all 
of the other layers and call it ‘Actions’. To do 
this, double-click on the layer name and then type 
in your title 


Insert Modify Text Con) 


Click your mouse in the blank area and enter a 

stop command ‘stop();’ (without the quotes). 
This tells the Movie Clip to stop the playhead at this 
frame. Because this is actually frame 1, it effectively 
means the Movie Clip won't play at all. 


1 Now save your main movie and test it 

(Control>Test Movie). Even though your movie 
only has one frame in the main timeline, you should 
see the animation that you just did. 


insert Modify Text Control Mmm 


Debugger 
Movie Explorer 
Reference 
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Component Help ~ Ut Set 2 
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15 | Frame 1 will have a keyframe on it by default, 
so now you need to open your Actions palette 
to enter the code (Window>Actions) if it isn't 
already open. 


Edit View 


Insert Modify Text Con) 


G Now you need to enter a keyframe on the 
Actions layer on the last frame of the Movie 
Clip (select the frame and then Insert>Keyframe). 
Select this frame and then add another ‘stop’ 
command into the Actions palette. 
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Tutorial Interacting with characters and objects 


Interacting with objects continued... 


Two-stage launch 


Keep the initial file size super 
small. You can use a stub movie 
to load in background graphics 
quickly, which then calls a 
second external movie if you 


have a lot of bitmap graphics, 


scripting or a sound track to load. 


Individual 
compression 


Flash enables you to set general 
compression options for sound 
and bitmaps on export. You can 
tweak the individual settings for 
bitmap and sound objects within 
Flash by selecting the object in 
question in the library, then 
choosing Properties from the 
Options menu in the panel. 


19 | If you test your movie again, you should see 
that the animation in your Movie Clip doesn't 
play at all now. Obviously this isn't right either so 
let's add a mechanism to change that. 


Edit__View Insert Modify Text Control Window Help 8 


insert Blank Keyframe 


Convert to Keyframes 
Convert to Blank Keyframes 


For this example, you only need to add a 

new keyframe (Insert>Keyframe) to frame 4, 
called Hit. The hit area of a Flash button isn't visible 
to the viewer, it just tells Flash where you want the 
‘hotspot' to be. 


[| @ Flash File Edit View Insert Modify Text Control Window Hel 


Now drag an instance of your new button 

symbol onto the stage and place it roughly 
over the dustbin Movie Clip. You may need to resize 
it to cover it properly. 


@ Flash File Edit View Insert Modify Text Con 
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20 In Flash there is a multitude of ways to 
achieve the same objective normally. In this 
instance we're going to use an invisible button, 
which will sit over the Movie Clip on the main stage 
and when activated will tell the Movie Clip to play. 
Go back to Scene 1. 


23 | Draw a rectangle on the stage in this frame. It 
doesn't matter about the colour or anything 
like that as it won't actually be seen by the viewer in 
the final output. Then, click back onto Scene 1 and 
open your library (Window>Library). 


Click on the button instance once to select it 
and then open your Actions palette again. In 
the text area type: 
on(rollover) { 
bin.play(); 


Layer 
Layer Folder 
Motion Guide 


Frame 
Remove Frames 


Keyframe 
Blank Keyframe 
Clear Keyframe Ore - 


Create Motion Tween 


Scene 


21 Insert a new button symbol (Insert>New 
Symbol). You'll be taken straight into the 
editing screen. The timeline will have changed to 
that of a button too. There will be only four frames. 


(| Instance of: dustbin 
\bin | | Swap... 
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24 Click on your Movie Clip symbol and in the 
Properties panel give it an instance name of 
‘bin’. We need to do this so that Flash can identify 
which symbol we'll be referring to in our code as 
every symbol can have multiple instances. 


B) instance of, inv button 


This tells Flash that when the mouse is rolled 

over the invisible button, it should now play 
the Movie Clip symbol. Test your movie and make 
sure it’s all working properly. 


Part 2: Creating invisible buttons 


Link actions to button clicks so that you can control the movement of your character... 


Naming tweens 


Turn shapes or groups into Movie 
Clips before you animate them 
with tweening. Flash does it 
automatically for you, but the 


naming system it uses (tween1, 


Pees 


tween2, and so on) can soon 


clutter up your library with 


Tre tt 


symbols that it's difficult to 


hijel.swt 
kinjei_char_send.swf 


keep track of. 
hunjet_vend swt 


Kind: Document 
‘Size: 144 KB 

Created: 1/1/04 
Modified: 2/4/03 


Let's create a movie where you control the 

movement of your character with your mouse 
We can use the walk cycle file that we created 
earlier on. Open up that file now (File>Open) 


Flash File Edit View Insert Modify Text Control Window Help 5 


4 | Add a new layer (Insert>Layer) to the top 
of the stack and rename it ‘actions’ by 
double-clicking on the layer name and editing the 
default name 


@ Flash File Edit View Insert Modify Text Control Window Hel 


@ dicknrun] 


insert Modify Text Control Window Help © 


Create Motion Tween 


Insert Frame 
Remove Frames 


Insert Keyframe 

Insert Blank Keyframe 
Clear keyframe 

Convert to Keylrames 
Convert to Blank Keyframes 


Actions 
v Properties 


Open up your file and select all of the walk 

cycle frames. Copy them (Edit>Copy Frames) 
and then start a new Flash document. Save this file 
before continuing 


| @ Flash File Edit View Insert Modify Text Control Window Hel 


5 | Now insert a keyframe (Insert>Keyframe) on 
this layer to match every keyframe of the walk 
cycle on the layer below. We're going to need these 
to add some actions too. 
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@ Movie clip 


port for runtime sharing 
C import for runtime sharing 


3} Create a new Movie Clip symbol (Insert>New 
Symbol) and call it ‘walker’. Select frame 1 of 
the new symbol and right-click on it (Ctrl-click on 
the Mac), then choose Paste Frames to put the walk 
cycle onto the timeline. 


(bby Oey 


‘Match Size. Soace 
Normal Mode OxuN Bfdb) 


Go to Line... 
Find... 
Replace... 
Check Syntax 
Show Code Hint 


Auto Format 
Auto Format Options... 


Import From File... on 
Export As File... Ox 
Print... 


View Line Numbers  O%L 
View Es¢ Shorteut Keys 


Preferences... 


Help 
Maximize Panel 
| Close Panel 


G Select your first keyframe on the actions layer 
and then open up your Actions palette 
(Window>Actions). Make sure you're in Expert 
mode because the code we're going to be adding is 
pretty basic and more easily hand typed. 


dit_ View Insert Modify Text Control Window Help 2 
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In the open text area type ‘stop();’ (without the 

quote marks). Do the same for every other 
keyframe on the actions layer (or copy the text and 
paste it into the Actions palette for each frame) 


= Layer 
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aes Motion Guide 


Frame 
Remove Frames 
Keyframe 

Blank Keyframe 


Insert Blank Keyframe 


Go back to Scene 1 and insert a new button 

symbol (Insert>New Symbol). This is going to 
be an invisible button, which will invoke action on 
another timeline when clicked. 


Convert to Keyframes 
Convert to Blank Keyframes 


In the button-editing screen, insert a new 

keyframe (Insert>Keyframe) onto frame 4, 
called Hit. This is the frame that Flash uses to 
identify the button’s hotspot. > 
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Creating invisible buttons continued... 


Alpha transparency View Insert Modify Text Control Window Help £6 


If you use tweening to fade out an 
object with Alpha transparency, 
the object's final state may still 
be faintly visible onscreen on 
some systems. Place a frame 


with the object removed in the 


timeline after the fade. This will 


get rid of ghosts. 


Looped clips 


Short snippets of looped sounds 
reduce file sizes and improve 
performance in comparison 


with long clips 


Draw a rectangle on the stage (still on the Hit 

frame). It doesn't matter about the colour or 
anything as it'll be invisible to the viewer at the time 
of output 


Add a new layer to the timeline (Insert>Layer) 

On the first layer (the lower one) drag an 
instance of the ‘walker’ Movie Clip onto the stage 
and place it right in the middle 


@ Flash File Edit View Insert Modify Text Control Window Hel 


Click on the button instance and open up the 
Actions palette again. Type: 
on(release) { 
walker.play(); 
} 
This tells Flash that as the mouse is clicked and 
when released it should tell the ‘walker’ clip to play. 
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Go back to Scene 1 and, again, insert a new 

symbol (Insert>New Symbol). This time make 
it another Movie Clip symbol and call it ‘clickMe' 
You'll be taken straight into the editing screen 
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Select the symbol and in the Properties panel 

give it an instance name of ‘walker’. This is 
done so that Flash can identify and talk to the clip 
and then pass actions to it 


1 Go back to Scene 1 and drag an instance of 
‘clickMe' onto the stage. Save your movie and 
then test it. You should see a static character in the 
middle of the screen. Click on him — he should 
advance one step in the walk cycle. 


Open your Library palette if it isn't already 

open by choosing Window>Library. We're 
going to bring together the two previously created 
symbols now. 


On the upper layer, drag an instance of the 

button symbol over the top of the walker 
symbol on the lower layer. You may need to resize 
this button to cover the symbol below 
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This process of invisible buttons and simple 

code can be used for almost anything when 
building interactive animations. Try adding to the 
code to make the character move a little in the 
direction of travel every time you click him... EEE 
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66 | Feature A brief history of character animation 


Illustration: Rob Brearley [w] www.chocolatetrousers.com 


brief history of 
character animation 


nimation, and particularly character 
animation, developed through a 
combination of man’s constant interest in 
| " storytelling and the traditional art forms that 
have long been recreating the human form. 
Neanderthal man, for example, illustrated successful 
hunts through their cave paintings, while the Ancient 
Egyptians recorded their legacy through intricate 
images on tomb walls. 


However, the development of the animated form we 
are familiar with today is more closely linked with the 
experiments and discoveries that led to the creation of 
the moving image. Lucretius made reference to a 
mechanism that projected hand-drawn images onto a 
screen as early as 7OBC, around 50 years after the 
Greek astronomer Ptolemy announced his theories on 
the persistence of vision. This in turn was only really 
fully addressed in 1825 by Mark Roget, who > 


Expertise for this feature provided by Chris Schmidt. 
You can contact Chris at [e] chris@track5.co.uk. 
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Ten 
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decades 


of character 


animation 


It started with a dinosaur, and lead to the 


creation of Wallace & Gromit and 
Monsters Inc. Here’s how character 


animation has evolved... 
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1 91 4 Winsor McCay’s Gertie the 
Dinosaur (above) is the first major 


triumph in character animation. 


19 


191 


his Rotoscope 
process, allowing live 
footage to be traced. 


192 


Max Fleischer patents 


determined that the human eye is capable of carrying 
an after-image onto the image that follows. 

Subsequent experiments with recreating the 
moving image were to inadvertently develop what 
would become more traditional animation techniques 
through contraptions such as the Phenakistoscope in 
1831, the Zoetrope in 1834, the Kinematoscope of 1861 
and Reynaud’s Praxinoscope in 1877 All were based 
on principles involving a series of images that were 
displayed in quick succession to trick the eye into the 
appearance of movement. 


Fy 
5 
6 
3 
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The comic strip appeared around 1890, merging 
storylines with original artwork, and it would later 
begin to influence the tone and vocabulary that would 
be adopted by animated characters after the dawn of 
the cinematic age. 


The early pioneers 

Winsor McCay is commonly considered to be the 
father of the animated cartoon. Between 1911 and 1921 
he developed a simple camera trick into full-blown 


Disney creates Steamboat Willie 
(above), the first successful animated 


film to incorporate sound. 


Disney sets up his first studio, 
Laugh-O-Grams Films, in Kansas, 
before going bankrupt and moving 
to California the following year. 


io, U2 
, 7A 


1 933 Max Fleischer 
introduces Popeye, a 


character from Elzie 
Segar's comic strip. 


1 Wamer Bros. creates the first 
cartoons with its character Bosko, 
a direct take on Mickey Mouse. 


Felix the Cat is created by Otto Messmer, 
becoming the first popular character to 
feature in a continued animated series. 


1 Warner's first Merrie Melody 
appears in colour. 


character animation, leading to his 1914 landmark 
animation Gertie the Dinosaur This set the standard 
for other animation studios to develop their skills, 
and in 1919 Otto Messmer at the Pat Sullivan Studio 
in New York created the first popular character in 
Felix the Cat. Both Gertie and Felix produced 
milestones in character animation as the subject 
started to move away from simple experiments in 
motion to actually creating characters capable of 
emotion and personality. 

However, it wasnt until 1928 when Mickey Mouse 
debuted in Steamboat Willie that the most influential 
studio came to prominence. Disney worked on 
developing the artistic aspects of character animation 
through technical developments, such as adopting Max 
Fleischer’s Rotoscope, which projected live film footage 
onto an animator’s drawing board, allowing natural 
movement to be traced and integrated into artwork. 

The Disney Studio's artistic achievements were 
partly due to its cinematic imagination, such as 


Disney releases Pinocchio (above) 
and Fantasia; Bugs Bunny is 
created in Tex Avery's A Wild Hare, 
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introducing sound and colour. Also, Walt Disney 
steered early character animation away from the 
earlier ‘rubber hose’ style, so named because of the 
way characters moved without regard to natural 
anatomy, as if all their limbs were rubber hoses, and 
towards the more natural and realistic style of the 
early 1930s. The first full-length animated feature, 
Snow White and the Seven Dwarfs (1937), for which 
Disney developed multiplaning camera techniques, 
and Pinocchio (1940) managed to achieve levels of 
technical brilliance and capture such realistic 
character movement that many animators feel they 
have never been surpassed. 

Like Disney, the Warner Bros. studio was also going 
down the character-led route through their Looney 
Tunes and Merrie Melodies cartoons. However, 
directors Tex Avery and Bob Clampett chose to move 
away from the Disney school of animation, which other 
studios were adopting, and towards their own highly 
exaggerated slapstick style. > 


©Disney 


19 


The first outing of Tweetie Pie 
wins a first Academy Award for 
Wamer's Friz Freleng. 


Disney starts to 
phase out shorts. 


© Hanna-Barbera 


The Flintstones (above) 
becomes the first prime-time 
animation to appear on TV. 


1960 


Fleischer's Superman 
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1 950 First computer animation of an 
animated bouncing ball created at 


series is born. 
MIT by Saxenian. Animations start 
to appear in TV commercials. 
i | a. —_ 
Disney creates Snow White Ene hes a 1 958 Hanna-Barbera produces its first 
1 93 while Warmer Bros. animations for TV, including 


1 949 First cartoon series is 
created for TV — Crusader 


Rabbit by Alex Anderson. 


introduces its new Huckleberry Hound. 


character, Daffy Duck. 
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In the first appearance of Daffy Duck, Porky's Duck 
Hunt (1937), the characters appear at first to be of the 
naturalist Disney style, but are constantly distorted 
beyond reality, defying physical laws purely for 
comedic effect. Other Warner artists were quick to 
pick up on this slapstick style (as were many other 
studios, including Disney), which ultimately became 
an intrinsic feature of character animation, best 
typified through Warner's Bugs Bunny character and 
MGM's Tom and Jerry. 


TV killed Bugs Bunny 


The '30s, 40s and ’50s were an exciting time for 
character animation as skilled and dedicated artists 
with a real passion for their work staffed the big 
Hollywood studios. However, as television became 
established as part of everyday life during the ’60s, 


© Warner Bros 


© Hanna-Barbera 


1 96 TV debut of Scooby Doo 
1 963 First computer art (above); the Internet is 
competition, sponsored by bom through ARPANET. 
Computers and 
Automation. 


John Stehura’s Cibemetic 
5.3 is the first computer- 
animated film from the UCLA 
Animation Workshop. 
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70s and ’80s, the art of animation began to suffer for 
the sake of business. 

With the advent of television, fewer people were 
drawn to the cinemas and many of the old animation 
studios were closing their doors. Disney managed to 
maintain its expected levels but stopped creating 
shorts by the early 1950s, and while there was the 
occasional animated feature, no other studio was 
producing them on a regular basis. By the late 1980s, 
even the Disney movies were losing their appeal. 

Bill Hanna and Joe Barbera, former directors at 
MGM and creators of Tom and Jerry, dominated the 
new television movement, churning out a seemingly 
infinite amount of work. Although many of their 
characters, such as The Flintstones and Scooby Doo, 
have become TV classics, the quality of animation 
when compared with the work of the earlier studios is 
debatable. The formula of flat, one-dimensional 


Single-frame videotape 
animation systems are 
introduced. Used for pencil 
testing, they're a major 
development in animation; 
Atari releases the cartridge- 
based 2600 videogame unit; 
Apple Il is released. 


1977 


Wamer Bros. 
Animation closes. 


1 


2001; A Space Oayssey is 
released, containing the 
first major use of motion 
control animation. 


1975 


1968 


The first Peanuts 
special is aired; Walt 
Disney dies. 


1 


The first 3D 
videogame, 
Battlezone, is 
released. 


1 


Industrial Light and Magic is 
founded by George Lucas; it's the 
dawn of the home videogame 
market as Atari releases Pong. 


characters and generic plots, plus character variants 
ona theme - compare The Flintstones with The 
Jetsons, for example — led to a stale period of 
character and animation development. 

Meanwhile, other TV cartoon studios like 
Filmnation and DIC mirrored the Hanna-Barbera 
business model in a desperate bid to conquer the most 
airtime, churning out series after series with marginal 
consideration for their craft. Ironically, it was the old 
studios, Disney and Warner Bros. that were to herald 
the return to quality animation in the late 1980s, with 
shows like Duck Tales and Tiny Toons drawing on 
previously established characters. Although this 
started a resurgence in quality animation, the budget 
restraints and hurried deadlines of the television 
industry prohibited animators from recreating the kind 
of art their predecessors had achieved. 

A turning point as far as cinema is concerned in the 
late 1980s was with films like Who Killed Roger Rabbit 
(1988) and The Little Mermaid (1989), which saw a 
return to popular mainstream animation becoming a 
more skilled and artistic profession. This paved the 
way forward for more contemporary animators. 


Contemporary movement 

The last 10-15 years have seen dramatic developments 
inall electronic media as the computer has become 
part of everyday life. Software provides tools that 


Nintendo’ 
ENTERTAINMENT Ssvstem 
MATTEL VERSION 


easily substitute the tasks that many animators 
painstakingly had to do by hand, and the whole 
process has escalated into new realms with 3D effects 
and Computer Generated Imagery (CGI) taking over 
from traditional techniques. 

One of the most respected contemporary animators 
is John Lasseter, who came to prominence by winning 
an Oscar in 1988 for his short film Tin Toy. This also 
brought him to the attention of the Disney Studio, with 
whom he eventually created the first computer 
animated feature, Toy Story (1995). 

With a traditional animation background, Lasseter 
became drawn to computer animation by viewing 
Disney's live-action feature Tron (1982). This inspired 
him, along with fellow animator Glen Keane, to make a 
30-second experimental test film that combined 
hand-drawn animated characters with computer- 
generated environments and camera movements. This 
was to provide crucial experience when working at 
Lucasfilm on Young Sherlock Holmes (1985), in which 
a stained glass knight comes to life. 

When the studio was bought by Steven Jobs to 
become Pixar, Lasseter became a director with the new 
company. With an emphasis on character and story, he 
became one of the original writers of Toy Story, for 
which Pixar provided the CGI. This new technology 
allowed the filmmakers to recreate textures and the 
three-dimensional quality of inanimate toys with 
human traits through intricate character animation. > 


1986 Nintendo releases 
the NES (above). 


1 G Cinematronics debuts Rick 
Dyer's Dragon Lair, the first 
videogame to feature 
animation through laser-disc 
technology; Commodore 
C64 introduced. 


\ 


1 982 Disney releases Tron, 
featuring 15 minutes of 
computer animation for 


235 scenes at a cost of 
$1,200 per second, 


1 989 John Lasseter wins 
an Academy Award 

for Tin Toy; Roger 

Rabbit is released. 


The Simpsons is bom as 
part of The Tracey Ullman 
Show; Compuserve 
develops the GIF format. 
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1 985 The Young Sherlock Holmes becomes the 
first live action feature to have a complete 


computer-animated character. 


Max Fleischer 


He set the stage for today’s 
animators and filmmakers... 


Max Fleisher not only introduced his own 
characters like Betty Boop and Popeye, but he 
also devised some of the most innovative 
technical developments. 

In 1915 he developed the Rotoscope, a device 
that plays back live footage frame-by-frame onto 
an animator’s art board, allowing the tracing and 
creation of more realistic character movement. 

The Rotograph was another Fleischer 
invention, created out of his desire to place 
animated characters into realistic settings. This 
allowed a character to be projected against a live 
footage background. Fleischer used this 
technique, along with his Rotoscope, to enhance 
his early films such as the Out of the Inkwell 
series, featuring his first star, Koko the Clown. 

In 1934 he devised a new filming method 
known as ‘Set Backs’, involving miniature sets ona 
turntable that would hold an animated cel 
between two pieces of glass. A camera would then 
photograph the scene, new cels could be 
introduced and the set could rotate as necessary. 
This helped give the illusion of an animated 
character not just in a real world setting but with a 
fully fleshed-out 3D environment. See his 1936 
film, Popeye the Sailor Meets Sinbad the Sailor. 

Many of Fleischer’s techniques were adopted 
or adapted by Disney — he paved the way for the 


future of animation and early filmmaking. 


Apple introduces 
QuickTime. 
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1 991 Disney's Beauty and the 
Beast becomes the first 


animated feature to be 
nominated for the Academy 
Award as Best Picture. 
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The future 

With the boom in CGI, many traditional animators fear 
for the future of their profession, despite traditional 
animation work still being produced by studios like 
Disney and DreamWorks. However, the truth is that 
most new studios and most commissioned work are 
CGI based. Adapting to new technologies is a 
constant feature in any media and many existing 
professionals are having to expand their skill base 

and learn new techniques. 

To become part of the future of character animation 
you'll need to decide on the techniques and platforms 
you're most comfortable with, master any software you 
rely on and study the work of your peers, without 


© Disney Pixar 


1 995 Toy Story (above) becomes the 
first computer-animated feature 
to be released; Sony introduces 


the PlayStation; Wavefront and 
Alias merge; Intemet 2 unveiled. 


Dreamworks formed; Facetracker 
used by SimmGraphics to 
animate facial expressions for 
Super Mario. 


xe 


199 


Maya 
released. 


199 


1 993 The Wrong Trousers wins an 
Academy Award for Nick Park; 
Animaniacs debuts; Myst is 


released and will become the 
biggest selling game of all time. 


19 


The Tamagotchi craze begins in Japan; 
FutureSplash released, to be acquired by 
Macromedia and renamed Flash. 


ignoring the past. Push your artistic and technical 
capabilities but don't forget that the most complex 
results will be in vain if your characters don't have the 
personality and movement to make your audience 
sympathetic to them. 

Remember, the bottom line is originality, creativity, 
imagination and character development. Whether you 
choose to create CGI work for cinema, model 3D 
characters for videogames or simple Web-based 
animations with Flash or Director, the best lessons can 
be learnt from history. This means you should get 
yourself a box of popcorn, plonk yourself in front of the 


yy 
» 


TV and watch a few hours of Bugs Bunny... all in the 
name of research, of course! GEE 


2000 The PS2 (above) 

continues Sony's 
dominance of the home 
videogames market. 


1 999 Toy Story 2 released 
through Disney/Pixar 
while Columbia/Sony 
release Stuart Little. 


Dreamworks’ Shrek wins the first 
ever Oscar for an animated 
feature, beating Pixar/Disney’s 
Monsters Inc, 
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Illustration: Jon Burgerman [w] www. jonburgerman.com 


SECTION SEVEN 


Smooth playbac 
and rolling credits 


Splash screens and end credits provide vital 
functions. We show you how to create them... 


yi he final part of our project takes you your animation. Get personal with 


through the steps needed to create ActionScript over the page. 
a splash screen and present your In Part 2 of this tutorial, the end credits 
all-important end credits. come under the spotlight. These provide 
As wellas providing an introduction to important information on who was involved 
your work, a splash screen can containa in the project and are a useful method of 
preloader to ensure smooth playback of allowing potential work to come your way. 
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Part 1: Code to preload 


Use ActionScript to give your movie the intelligence to realise when playback is ready... 


Scripting 
preloaders 


The following method of 
preloading a file is great for 
animations that are stillto be 
completed or will be added to in 
future. This is because the 
ActionScript calculates the 
percentage to load inrelation to 
the total file size. This means that 
despite any future amendments 
you may do to the animation, the 
preloader won't need any 
changes to work accurately. 


External script 


Long ActionScripts can be stored 
as external text files with an .as 
extension. To use them ina 
movie, you'll need to place an 
‘include’ in the file that points to 
the external file. This enables 
you to reuse complex routines in 
movies, or build up a library of 


common scripts. 


Sits ees 


Et We're going to use the file ‘splash. fla’ to 
develop our preloader. Open the file and 
notice we've placed a hefty graphic in the second 
scene for our function to process. 


> Properties 


+ Actions - Frame 


Actions for Frame 1 of Layer Name actions 


@® tinctude 
@® Piniotip 
@® clearinterval 
@ comment 
@ evaluate 
@® setinvervat 


@ uae 


4 | To restrict the movie, create a new layer named 
‘actions’ and insert a Stop action in the first 
frame. Then add and name a variable through 
Actions>Variables>Set Variable and Apply 
Actions>Miscellaneous Actions. Enter ‘setinterval’ 
as the Value. 


Gondition: [Gerexestoaded(y = getEges Total) 


+- PUD 


myInterval = setInterval(prelosder, 10); 
function preloader() { 


Our function needs a condition, so enter 

Actions>Conditions/Loops>lf. Then enter the 
following code as illustrated above: 
GetBytesLoaded()>=getBytesTotal(). This script 
compares the amount of data downloaded with 
the file's total. 


2] In the first scene, create a new layer and draw 
along rectangle with a stroke. Isolate the 
border and convert to a Graphic symbol with the 
name ‘border’. This will be filled gradually to 
provide a visual indication of how much of the file 
is still to load. 


The fill needs to be converted to a Movie Clip. 

Provide the clip with a suitable name and 
ensure that the registration point is to the left of the 
object because we'll control the scale of this through 
ActionScript. Add some descriptive text so our 
audience knows what's happening. 


> Properties 
» Actions - Frame 


Yatiable: { mainterval 
Value: | setinervalipreioader,0) 


- BAG 


cS | In the closing brackets enter the function 
name as ‘preloader' separating its value of 10 
with a comma as above, and check the Expression 
box to the right. The function is now being called 
every 10 milliseconds. 


stop(); 
myInterval = setinterval (preloader, 10); 
function preloader() { 


8 | Once the criteria is met, you need to complete 
the condition with a Play command so that the 
function knows what to do next. Insert this through 
Actions>Movie Control>Play to follow your 
previous code. 


I [a] Actions for Frame 1 of Layer Name actions 


With a function referenced, you need to 

actually create one. Locate the Actions>User- 
Defined Functions>Function and provide the name 
‘preloader' we established in the previous step. 


stap()F 

myInterval = setInterval (preloader, 10): 

function preloader() { 

if (GetBytestoaded (j>=getBytesTotal()) | 
piay()+ 


You also need to clear the earlier setinterval 

command at the same time, which can be 
done by including Actions>Miscellaneous 
Actions>clearInterval setting the name you specified 
earlier as the parameter. 


Horizontal scale 


We've used the _xscale property 
because this determines the 
horizontal scale of a referenced 
object from its registration point. 
It's for this reason that when we 
created the original Movie Clip 
forthe preloader fill element, we 
set the registration point to the 
left so the increasing scale would 
expand from left to right. 


Successful testing 


When testing your completed 
SWF file, make sure to do so 
from a remote server rather 
than accessing the file directly. 
Test it via a regular HTML page 
with the file embedded. This way 
you'll get the benefits of seeing 
the preloader in action rather 
that waiting with a blank screen 
while your browser bypasses 
the function, 


+ Properties 


» Actions - Movie Clip 


10 | So far, so good... our script operates as a 
preloader but is pointless without any visual 
indication. Back on the movie, select the preload fill 
bar and provide an instance name through the 
Properties panel; we've called ours ‘fill’. 


function : Dedares a user-defined function 


Name: preloader iw 


stop (); 


myInterval = setInterval(preloader, 10); 


if (GectBytesLoaded()>=getBytesTotal()) { 
play(); 

cleariInterval (myInterval) ; 

} 

fill. _xscale = (getBytesLoaded()/getBytesTota 


13 | Depending on your scripting skills, the code in 
its entirety should be relatively easy to 
understand. However, if you come across any 
problems, make sure you've copied the code 
precisely, have corresponding names for the preload 
fill and have the appropriate expressions checked. 


myInterval = setInterval(preloader, 10); 
function preloader() { 
if (getBytesLoaded()>=getBytesTotal()) { 
play(); 
clearInterval (myInterval) ; 


bar . xscale = (getBytesLoaded()/getBytesToy 


G Return to your ActionScript code to add a new 
variable following the fill._xscale line via 
Actions>Variables>Set Variables. Reference your 
dynamic text with the variable name percent.text as 
shown above. 


: | fill_xscale 


stop(); 
myInterval = setInterval(preloader, 10 


function preloader() { 
if (GetBytesLoaded ()>=getBytesTotal () 
play(); 
clearInterval (myInterval); 


| fl _usoale 
: sstueseiieeeeeiiest 
(getBytesLoaded(}/getBytesTotal()"100 


= setInterval(preloader, 10); 
eloader() { 
tesLoaded()>=getBytesTotal()) { 


tt | Jump back into the ActionScript and set a For the variable value, check the expression 
new variable after the if statement through box on the right and enter 


Actions>Variables>Set Variables. Name this (getBytesLoaded()/getBytesTotal())*100 as shown 
variable ‘fill__xscale’ to correspond with our named above. This calculates the value of the _xscale 


preload bar. property that will be applied to our named fill bar. 


14 | To accurately test the movie, reference the file : : 
from a regular HTML page and upload the files 15 | To add a percentage text equivalent to 


to a remote server preferably outside a local 
network. For best results upload to a remote Web 
server (if you have access) and test online otherwise 
the preloader effect will be lost. 


complement the visual element, create a 
dynamic text field with a unique name. This is 
needed to reference the element from the script — 
we've named ours ‘percent’. 


Walue: | Math.round{getBytest oaded()/getBytesTotal()"100)-"%" 


oF 


myinterval = setInterval(preloeder, 10); 
function preloader() { 
if (getBytesLoaded()>=getBytesTotal()) { 
Play(): 
clearInterval (myInterval) ; 
} 
ber . xscale = (getBytesLoaded()/getBytesTotal ())* 


Check the Expression option by the Value 

field and carefully copy this equation: 
Math.round(getBytesLoaded()/getBytesTotal()*100 
)+"%" Be sure to copy this accurately because G Again, test the files online via a regular HTML 


Bvwemeteiivsria deen | Oe | 


differences in case or additional spacing can often 
render code useless. Save your file and test the 
movie to export the final SWF. 


reference and you'll see the percentage rising 
along with the fill bar. To see the effect online take a 
look at [w] www.track5.co.uk/splash.htm. > 
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Part 2: Cue credits 


Keep your audience entertained while they find out who's involved... 


Secret credits 


Fora more subtle approach, 
create a credit scene that can be 
accessed only through a hidden 
combination of key presses such 
as your name or business. This 
way you can really prove you're 
the original creator of the 
animation should a potential 
client or employer need further 
proof of your skills. 


Credits have an important message to convey 
and although stylistically there are infinite 
variations, the general idea is that text scrolls across 
the screen so viewers can see who was involved in 
the creation of the animation. Open the credits. fla 

file to which we'll add the effect. 


George tucas| 


rs For longer FoF loner kts you can draw your inspiration 
from TV or film examples. Most credit 
sequences are relatively humble scrolling affairs. 
Open and save the credits.txt file from the CD to 
your computer for some sample credit text. 


ivy Access the default Flash components via 
Windows>Components and drag the scrollbar 
to the inside-right of your text box. The scrollbar will 
automatically snap into place and scale itself to the 
text container. 


The chances are that your project won't have a 

huge list of credits, so vast perspective Star 
Wars-style credits will be a little excessive. In this 
example we've simply rearranged the layout slightly 
and integrated the developers into the design. 


¥ * Properties 


6, [nour Tent | Tex 


> ORS = Frame 


An effective wath of firovidisg au such 
information might be through a scrolling text 
box, and fortunately Flash provides components to 
create such a feature quite easily. Create a new 
layer, select the Text tool defining its properties as 
Input Text and Multiline. 


8 | Leave the scrollbar selected and take a look at 
the Properties panel. There are basic controls 
available, but move into the Parameters tab and 
you'll see how the Component Movie Clip has 
automatically associated itself with the named 

text container. 


> Properties 


» Actions - Button 


@ tscommand 


@ sewre 

@ oadmovie 

@ boadvariables 
@ unloadmovie 


on (release) { 
[BD Movie ctip Contra! 
BB vane Pe ee eee 


If your project is intended to show off your 

skills as part of a showreel or for portfolio then 
convert the individual titles into email links by 
adding getURL actions to button symbols using the 
mailto: prefix as illustrated here. 


G Determine your font properties and whether 
you want to contain it within a border before 
dragging a text field into your new layer. Give this a 
unique name from the Properties inspector so you 
can identify this element later. 


9 | Copy the contents of the credits.txt file into 
the text container and test the movie. Your 

text is now available for viewers to scroll through 
and inherits the formatting properties assigned to 
the container. 


Choosing fonts 


To reduce any excess bloating of 
your final file size, you may want 
to choose a generic device font 
such as _ sans or _serif from 
within the text properties. This 
means no additional font 
information needs to be 
embedded into your file, because 
the SWF file simply uses the 
users default font, usually Arial 
for _sans or Time New Roman 


for_serif. 


| File Edit View Insert Modify Text Control Window Help 


| » Timeline 


10 | There may be occasions when your credit text 
will change, in which case you may prefer to 
update content by referencing an external text file 
rather than having to amend your source .FLA each 
time. Revert to the original credits.fla file and insert 
two layers for actions and credits. 


[B) Movie controt 
IB) Srowserinietwork 
@ tscommand 


@ sewre 


@ oadmovie 
@ voadvariadies 


Ce 
13 | Move onto your Actions layer and locate the 
Actions>Browser/Network>loadVariables 
option and enter the location and file name of the 
text file you want to include. As we've copied this 
into the same folder, you only need enter the file 
name of credits.txt. 


Var: Levins 


16 | You'll also notice that your text has inherited 
some curious formatting. With a little 
knowledge of HTML, you can easily get round this 
and provide some useful features. Select the text 
box and activate the Render Text as HTML option in 
the Property panel. 


Text tool and determine your formatting 
preferences as we did before, including the multiline 


option for line type but choosing the Dynamic Text 
option this time. 


| Fle Edt Format View |Help 
xtField=(AARACTER DESIGN 


Soe Bloggs 
Dave Blogs 


MUSIC 
Joanne Bloggs 


| SOUND EDITOR 
Joanne Bloggs 
WEd Bloggs 


14 | Next, open the credits.txt file and label the file 
internally with the variable name so Flash 
recognises what to include. Simply type 
“textField=" (without the quotes) before any 
content and save the file. 


textField=CHARACTER DESIGN 
<a href="mailto:joe@kinjei 
i Bloggs</a></b></p><br>| 


<b>Joe Bloggs <br> 
Dave Bloggs</b></p> 


Flash will now recognise basic HTML tags from 

within your original text file, so edit this 
accordingly either by hand or using your preferred 
HTML editor before saving. Make sure you retain 
the .TXT file extension. 


os a2 ea ae 


With your text preferences defined, drag a text 

field onto its own layer. To associate the object 
with the text file, you first need to provide a variable 
name for the text field. Enter the name textField in 
the Var field of the Properties panel. 


CHARACTER DESIGN 


updated content 


15 | Save and view the exported SWF file and you'll 
see the contents of the text file showing. Make 
changes to the original text file and reload the SWF 

to see how your changes are automatically updated 

without the need to open your original FLA file. 


18 | You may need to experiment with what is 
possible through such formatting. For example, 
inserted links will work, but you may choose to 
change their colour to make them obvious. This is 
because many common regular HTML behaviours, 
such as the blue underline, will be missing. EEE 
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The UK’s favourite 
Internet magazine 
is about to get better 


@ Discover the new look .net magazine, on sale 11 April. 
@ Includes two CD-ROMs with software worth over £400. 


animators 


4 en. 
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NEOSTREAM VII 


fi 
it 


Planning Director Johnny Choi stresses the 
importance of defining your goals before you 
start a project. 

[w] www.neostream.com 


band 
PROFILE a 
p82 Neostream 
“Many days and weeks were spent on giving 
the character a theme, characteristics and a 
metaphor before it was developed visually 
in any way.” 
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“This was an opportunity to do animation for its own sake, 
where the movies are watched by a bunch of die-hard fans.” ; ne 
Designer and animator Theodore Ushev explains the impact 4 “Now that I've started animation I'm hooked, 
that Flash has had on his career. and spend lots of time creating new 


[w] www.mortadellatv.com scenarios for the Ponkas.” mn 
Peter O’Dwyer, creator of Sixsidia, enthuses 


about his animation work and shares some of 


his techniques. 
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Shocked by the power 


Mleostream 


Creating Websites and characters is easy for Sydney-based agency 
Neostream. But make no mistake: “We try to avoid cases where 
we become simply manual labourers,” says Johnny Choi... 


words by Graeme Aymer 


\though Britain constantly pats itself on the 
back as being one of the world leaders in the 
{ field of design, don't forget Australia, Sydney 

i in particular. Remember that spectacular 
outdoor opera house and its stunning fireworks 
displays after all. The city is also home to Neostream, 
an innovative agency responsible for a clutch of 
distinctive Websites for local as well as international 
clients. It's also got an office in Seoul, South Korea. 

The Neostream story began back in 1998 with an 
aim to create cutting edge multimedia design. 
“Starting out ata relatively young age at a time when 
the Web was only beginning to demand a higher level 
of visual quality, the founding of Neostream is just 
another ordinary story about a bunch of guys venturing 
into the unknown and experiencing the world at large,” 
says Johnny Choi, Neostream’s Planning and 
Communications Director. 

Currently, the company employs five production 
staff in Sydney and eleven in Seoul, with the directors 
travelling between offices to oversee work in progress. 
Most of Neostream’s work revolves around the Web, 
design and development for both front-end and back- 
end applications. The company also undertakes 
motion graphics work as well as corporate ID design. 


For an example of Neostream’s character design expertise, look no further than 
Shockboy, the character featured on the company’s redesigned Website... 


If your Website is the main source of 
your leads for jobs, you'll need to keep 
it looking fresh at all times. So when 
Neostream decided it was time to 


redesign its online presence, it also 


decided to update its mascot, 


Shockboy, a character that was 
popular with site visitors in its 


previous 2D form. 


“Many days and weeks were spent 
on giving the character a theme, 
characteristics and a metaphor before 
it was developed visually in any way,” 
recalls Johnny Choi. 

After careful discussion and 
planning came vector sketches using 
pre-developed character component 


modules. “The key action poses were 


re-done in 3D software, and animation 
sequences were rendered with the 
required lighting and effects. To make 
it compatible for the Web, a 
combination of cartoon rendering and 
vector reproduction was used to carry 
the required animation impact. The 
camera work was all manually 


animated and tweened in Flash.” 


“Corporate identity work has usually come with 
other services and was part of the online brand building 
process,” Johnny explains. “We don't officially offer 
print design work at this stage although we sometimes 
create print design pieces for clients upon request.” 

Neostream’s client list is pretty impressive. It 
includes United Nations human habitat agency 
UNCHS, LG Electronics, Diageo (Seagrams) and 
Travel.com.au. However, as Johnny’s keen to point out: 
“As all creative agencies and production houses will 
agree, the biggest clients are not necessarily 
representative of our best work.” For a true taste of 
the Neostream style, you might want to visit Dead 
Game at [w] www.dead-game.com, New Pencil at 
[w] www.newpencil.com and Oxo Art at 
[w] www.oxoart.com. Neostream has also created 
aTV commercial for LG Electronics in Flash. 

Day-to-day work involves Windows-based PCs, 
with other platforms represented for testing purposes. 
In terms of software, there are your usual tools from 
Adobe and Macromedia, with LightWave and 3ds max 
handling the majority of 3D needs. “Seeing as we're 
not a full 3D animation production company, we keep 
external third party resources at hand when we require 
detailed rendering or effects done,” adds Johnny. 
Sound Forge and Sound Edit are on hand for audio 
requirements, though Neostream often uses a 
professional sound production team to compose from 
scratch when necessary. 


Inspired results 


“Inspiration comes in many forms,” reveals Johnny. 
“We try to avoid cases where we become simply 
manual labourers working to clients’ tastes. Instead, we 
try to create production pieces that deliver the required 
message and content to the client's end user. We try to 
satisfy all levels of the client’s supply chain, but still 
feel that the most critical is to satisfy the ultimate end 
user. Thus, in many cases, inspiration to ourteam 
comes when we have successfully created a positive 
response from the end user, and satisfaction comes 
when our suggestions and approach actually derive a 
positive response from the public audience.” > 


1, Neostream mascot Shockboy began life 
as a 2D character, but his popularity with 
site visitors encouraged a redesign. 3D 
technology was used to test him ina series 
of environments and poses, such as sitting 
ona computer keyboard. 


2. Important for the final character 
animation were the component modules, 
which broke Shockboy into a set of body 
Parts in order to streamline the modelling 
process. Each component was sketched out 
before work began on computers. 


3. Before the character could be fully 
animated for the Neostream site, the 
agency placed him ina series of poses in 
3D. The final version could then be re- 
rendered in Flash for use on the Web. 


4. Poor Shockboy. As the rather substantial 
Neostream VII homepage loads, the 
character appears to be electrocuted. 
Again, a series of ideas for how the 
character would react to his ordeal was 
presented prior to final deployment. 


1D Reveal Unies 
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5. Shockboy’s role on the Neostream VII 
site is as a navigation tool. Here, the team 
tests how he moves, setting out fireballs 
that become rollover buttons for making 
your way through the site. 


6. All good characters start with planning 
and sketching, according to Johnny Choi. 
Prior to constructing component modules 
for use on a computer, good old-fashioned 
pencil and paper outlined Shockboy’s 
look and feel. 
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There's a new arrow in the Neostream quiver, 
however: character design. The results have a number 
of outlets — from doll and toy manufacturing to 
Websites integrated into a brand’s overall marketing 
campaign. For this activity, Neostream takes a rather 
systematic approach. While the end product might be 
as funky as the company mascot Shockboy, as featured 
on the latest version of the agency's site (Neostream 
VII, currently in beta test stage), the company 
approaches character design in a systematic, 
organised way. 

“The first process is always to evaluate the purpose 
of the character design and to define the character's 
personality and characteristics so that the required 
communication message is correctly delivered through 
the character's appearance and actions,” says Johnny. 
Next come sketches and illustrations. In orderto gaina 
realistic idea of the character, it'll be modelled in 3D 
and placed in a number of poses and situations to 
ensure that ideas work correctly. “During the whole 
process, many modifications and adjustments are often 
required to satisfy the wide range of audience tastes 
and preferences without pulling away from the key 
characteristics,” concludes Johnny. 

This will be especially useful as Neostream makes 
its planned move into the PC games industry, which, 
says Johnny “has been on the Neostream agenda of 
‘things to do’ for a long time”. While Johnny concedes 
that games development will take some time to 
integrate into Neostream’s skill set, the plan is to be up 
and running sometime this year. Future plans also 
include the further adventures of Shockboy, bringing 
to life fully animated episodes of the agency mascot. 

Although character design is relatively new to the 
Neostream crew, it doesn't mean that the team 
members can't offer valuable advice to up and coming 
character developers. 


“The most important aspect of character design is, 
once again, careful planning, defining a clear set of 
goals and identifying the key visual and practical 
communication message you wish to convey through 
| the characters,” recommends Johnny. “Once this is 
defined, then a list of personality traits, habits, 
strengths and weaknesses will need to be outlined. The 
best advice we can offer at this stage is for designers 
not to restrict themselves to a specific media in their 
planning and scope process. Great ideas often stem 
from relatively unrelated sources such as old books 
and novels, movies and of course many, many 
brainstorming sessions with fellow designers.” 

Sounds like good advice to us. GE 
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1. Prior to even designing the character, the 
Neostream team considered a variety of ideas 
with plenty of note taking and sketching to get 
the concept straight. 


2. Neostream’s navigation takes on a number of 
forms and all concern Shockboy’s antics. But 
as usual, before you get to the final product 
you have to sketch and test, and test again. An 
early Shockboy wields an interactive mallet, 
and deals with a virtual spook. 


3. Neostream used Flash to re-render 
Shockboy using vectors, making him ready 
for use on the Web. 
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Computer Arts Special 

Flash Games — COSB0040 
Awhole issue dedicated to creating 
games in Flash MX. Ourtutorials 
show you how to make your own 
versions of gaming classics such as 


Tetris, Asteroids and Space Invaders. 


Other techniques demonstrated 
include: character animation, sound 
recording, lip-syncing and 3D 
character creation. You can also find 
out what the experts think are the 
essential ingredients for creating a 
successful online game. 

CD Demos of Flash MX, Swift 3D v3 
and FlashAmp. Plus a range of the 
best Flash games and extensions. 


Computer Arts Special 

Photoshop — COSB0041 
A100-page guide for Mac and PC 
Photoshop users. Our tutorials for 
creating stunning graphics include: 
spray-can graffiti effects, realistic 
explosion action scenes, natural 
media scan effects and futuristic 3D 
montage images. We also show you 
techniques for slicing Web graphics, 
customising tools and brushes and 
perfecting colour in digital images. 
Plus, 50 brand new Photoshop 7'tips 
as wellas advice from professional 


Photoshop designers and illustrators. 


CD Photoshop 7 demo, plus over 50 


project files for our in-depth tutorials. 


Computer Arts Special 

Digital Portfolio— COSB0042 

Follow our 100-page full project (for 
Mac and PC)to creating an interactive 
portfolio. Using Photoshop, Fireworks, 
Dreamweaver and Flash, we show you 
how to plan a Website, fill it with 
content, make it interactive, and 
publish and promote it. Creating a CD 
portfolio with Photoshop and Director 
is easy with ourtutorials, from 
designing an interface, animating text 
and graphics to adding interactive 
elements. Get inspiration from our 
profiles of top Web designers. 

CD Demos of Director MX, Flash MX, 
Dreamweaver MX and Fireworks MX. 


Computer Arts Special 

Layout & Design — COSB0043 

Start publishing your own magazines 
and brochures with our expert 100- 
page guide. From template design to 
getting the most from images and 
fonts, we've got step-by-step tutorials 
to get your work into print. There's 
professional advice on every aspect 
of design and publishing, from 
organising files and designing covers 
to special finishes, plus a full guide to 
publishing online, the best books to 
buy and the secrets of flatplans, 
photoshoots and printing revealed. 
CD Demos of /nDesign 2, Canvas 8, 
PS Elements 2 and 100+ free fonts. 


Computer Arts Special 


Brand Identity — COSB0044. 
Create the perfect company logo for 


use on stationery, advertising and 
other branded products. We begin by 
explaining the fundamentals of logo 
design, and then guide you through 
the process of producing letterheads, 
branding objects and extending your 
brand with newsletters and other 
promotional materials. There's also a 
guide to animating logos for use on 
video and the Web. Plus: tips from 
the experts, and the world’s most 
recognisable logos revealed. 

CD Demos of XPress 5.0, Illustrator 
10, Flash MX, Fireworks MX 8 more. 


Issue 79 — Code COA79 

Inside the creative mind, setting up 
in illustration, 3D in Cinema 4D R8 
CD ImageZoom 1.2, Amapi 3D 5 


Issue 80 — Code COA80 

Designing for cross media, women in 
design, 3D in Photoshop and more 
CD Director MX, Maya PLE 4.5 


Issue 81— Code COA81 

Broadband design, Photoshop 3D 
CD 3 full products: Mediator 5 Std, 
WebDesign 1.8, Alias Studio PLE 


Issue 82 — Code COA82 

FreeHand MxX, Flash and 3ds max 5 
CD Over £1,800 worth of software, 
stock imagery and video tutorials 


Issue 83 — Code COA83 

101 illustration tips, ActionScript 
CD MediaEdit 1.3.1, Softimage/XSI 
EXP 3D & Photoshop video tutorials 


All back issues cost £6. Postage free in UK. Add £1 per issue for European orders, Add £3 per issue for the rest of the world. 


CALL THE HOTLINE ON: +44 (0) 870 444 8455 
or [LAKE OUT A SUBSCRIPTION — see page 38 
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Theodore Ushev 


From flipbooks to Flash, this designer and animator has a wonderfully unique and refreshing approach 
to the moving image. “The most important thing for me,” says Theodore, “is to have pleasure finding 
new forms, experimenting, never repeating old stuff.” 

words by Vicki Atkinson. 


ith an impressively varied collection of 
animated shorts and a small army of 
characters, Theodore Ushev, founder of 

/ Mortadella TV (aka MTDTV), has much to 
say on the subject of animation. From his distaste for 
post-1960s Disney to his passion for The Pink Panther, 
the Bulgarian-born graphic designer has some strong 
opinions that would benefit the budding animator. 

First, the idea. “A character has to be unique,” says 
Theodore. “A copycat doesn't work, neither do the 
things that are taught at school. If somebody has done 
that character before, then why repeat it?” Secondly, 
movement. “Deciding upon the character's way of 
movement will help the piece. It is the most important 
thing in the telling of a story or the illustrating of a 
concept in non-narrative movies. It can be completely 
static or itcan move in an absolutely unpredictable way, 
if it helps the impact, and if it’s touching then it'll work.” 
And thirdly, try new styles and approaches. “There is 
always a place for something different. People get 
bored so fast, so why not try something new?” 

From whence does this experience come? Theodore 
began his artistic education in animation, theatre and 
set design nearly ten years ago. But the lack of funding 
for art animation and his disinterest in the mainstream 
cartoons of the day caused him to veer into graphic 


design, poster and book illustration at Sofia University. 
Several awards later, in 1999, Theodore travelled from 
Sofia to Montreal to work as a senior designer at a 
large Web company and now works as a graphic 
designer for his own small agency. It’s only in these last 
few years, when he began to experiment with Flash, 
that Theodore has had the chance to exploit his talent 
for motion graphics. Much of his work goes under the 
name Mortadella TV, his personal online space for 
experimenting with typography and moving image. 

His first animation experience was the movie 
Aurora, a highly graphical piece where a single 
character eats the sun, which can still be seen on the 
MIDTYV site. “I was just educating myself in Flash, using 
a character from one of my posters. It was an amazing 
experience.” This started the revolution for Theodore — 
the realisation that an animator no longer needed 
funding, producers and cameras to make movies. 
“Flash was my aurora, my dawn. It took me back to 
animated work, which | had completely abandoned. 
| had even stopped watching animations. This was an 
opportunity to do animation for its own sake, where the 
movies are watched by a bunch of die-hard fans.” 

So he started animating again, creating shorts for 
the Web. People did watch them and animation sites 
such as 120seconds.com and hotwired.comeven > 


1.A moment from Walking on by... 
Theodore's quirky, and extremely 
popular, Flash animation. 


2. Theodore’s first animation, 
Aurora, features a character made 
up of separate shapes who eats 
the sun before it goes dark. 


Walking on by... 


Theodore Ushev's appealingly 
simple animation appears at 
the Flash Film Festival... 


Nominated in the Cartoon category at the 
Flash Film Festival 2003 in San Francisco, 
animated short Walking on by... impressed 


the judges with its simplicity, humour and 


technical expertise. “I did it as a joke,” 


laughs Theodore, who was genuinely 


surprised at his creation’s popularity. 


“| wanted to create something with a very 


simple concept, an easy character that could 


have been designed by a kid.” 


The movie features a line-drawn 


character, casually walking along while other 


characters and obstacles fall in his way. 


Nothing deters him from his path until the 


inevitable end. The lack of detail was a 


challenge for Theodore considering his 


graphical education and expertise with a 


pencil. “When | designed the characters in 


this movie, | tried to forget everything that | 


knew of art. | wasn't trying to impress anybody 


with how well! can draw. All| wanted to do 


was tell a story of life, grief and happiness in 


a naive, easy-going movie.” Theodore strove 


to keep it simple, fighting the desire to add 


textures and sophisticated effects. 


After choosing an appropriate soundtrack 


by musicians Jontef, the short was ready, 


complete with message. “Everybody comes to 


an end, no matter how well or badly he has 


lived, and someone else comes after him, and 


so on.” See Walking on by... at the Mortadella 


TV site at [w] www.mortadellatv.com. 


The sheer volume of downloads led to an 
initial ban from Theodore’s hosting company. 
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bought them. Shortly after, various film festivals asked 
him to enter his movies and since then his expertise 
and client list has grown. “The Flash and Web 
animation have become almost the day job, | don't 
have any time to do my posters and graphic designs!” 


Mortadella TV 


The name for Theodore’s online space is from the Latin, 
loosely translated as the death of TV, which was an 
early personal manifesto. “But at the same time it’s 
connected to the mortadella sausage, a cheap sausage 
made from leftovers in butchers shops.” He explains, 
“MTDTV aims to tease, aims to unveil the ironies of 
everything cheap in our life — junk food, junk movies, 
junk ideas, junk behaviour, and so on.” Despite the 
anti-mass culture themes of his animations, they 
continue to attract worldwide recognition. And the 
irony isn't lost on Theodore as his exquisite work 
appears on national television channels. 

Atypical project will start with storyboards, before 
being made into a rough animation with key scenes 
and music. He works mainly ona PC, using Flash, 
Photoshop, FreeHand, After Effects and, more recently, 
2D animation package Toon Boom. He also uses a 
Wacom graphics tablet. 

All of Theodore’s animation work is derived from 
experimenting with new ideas, most of which are born 
while he travels the city by public transport. “In the 
morning | do my client work. | have a big problem 
working in the afternoon — that’s when | like to go out 
and meet friends. My most creative period is after 
4pm, up until midnight. That's when | do my movies.” 


Although Theodore admires such animators as Nick 
Park, Brothers Quay and Jan Svenkmayer, his work is 
most definitely his own. “The most important thing for 
me is to have pleasure finding new forms, 
experimenting, never repeating old stuff. First comes 
the idea. The idea always brings me the form. And the 
form has to follow the story, the message. The most 
important thing for me is to tell the viewer something. 
The question of howis dependent on the story, and its 
mood. Sometimes the idea and the form come 
simultaneously — and this is when it works best.” 

Over time, Theodore has been commissioned by 
clients looking for animation work, as well as graphic 
design. He's done a range of animated work from 
corporate pieces to shorts for theatre companies. One 
of his preferred shorts was Vertical, commissioned by 
the National Film Board of Canada. “It was one of the 
most challenging of my projects in terms of script and 
design,” says Theodore. His characters have also been 
made into a flipbook for French publishers Editions la 
Pouce et l'Index. Their new series called 1868 Le 
Folioscope celebrates the flipbook as one of the first 
examples of animation. “The result is amazing. This is 
definitely the best thing that | have done in my life.” 
And there are plenty more opportunities to beat it: “I’m 
currently working on my first music video, which is an 
interesting new experience, since the music has 
always played an important part in my work.” Keep 
your eye on the MTDTV site for more. EEG 


1. Many of Theodore’s animations, including 
Aurora, Walking on by... and Time is... 
(featured here), can be seen on his Website. 


2. This scruffy, scratchy animation, 
Disassociation, is a beautifully crafted piece 
where a dreaming character imagines himself 
morphing into a series of different objects. 


3. These two images have been created for a 
new series of flipbooks called 1868 Le 
Folioscope, one of which has been illustrated 
by Theodore. 


for $25 a month 


you can have access to the entire ~ 
lynda.com online training movie library! 


Over 100 hours of movie-based tutorials from the popular lynda.com training CD-ROMs are now _ 
available online in QuickTime format for Mac and PC users. For the introductory price of $25 a month, 
the entire lynda.com training library is available to Internet users anytime, day or night 24/7. 
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over 2600 movies and growing! 


why online training? 


Composed of in-depth, movie-based 
tutorials on today’s most sought-after 
graphics applications, the Lynda.com 
online learning program offers access 
to a wealth of information at a fraction 
of the cost of our line of CD-ROMs. 


The movie library is updated 
frequently and grows ona monthly 
basis, so this new service is now the 
fastest and most economical way to 
gain knowledge of new graphics, 
animation and web applications. 


why CD-ROMs? 


- No internet connection required - 
faster access to movies 

- Includes tutorial source files so you 
can work along with the instructor 

: Higher quality movies and sound 

- You can take the CD with you when 
you travel or work without internet 
connection 

-Our CD-ROM recordings areofa 
higher quality than computer training 
that is delivered on video or DVD 


what about getting both? 


Even if you decide to subscribe to our online learning library, you might want to consider 
purchasing individual CD-ROMs. This gives you the best of all worlds - you can get that 
question answered in the middle of the night, decide if you want to learn a new 
application, or watch a full tutorial on the CD-ROM and study along at your own pace 


using the tutorial files. 


learn any of these programs online 24/7: 


acrobat ¢ photoshop « fireworks 


imageready « director « flash * ultradev 
dreamweoaver ¢ quicktime « illustrator * after effects 


start today at http://movielibrary.lynda.com 


Lynda.com is a training company for creative professionals co-founded by best-selling author Lynda Weinman and her 

illustrator husband Bruce Heavin. Known for the ability to teach digital design techniques in an approachable, humanistic 

manner, Lynda.com is one of the most popular training companies in the business. In addition to producing training CD- 
ROMs which are distributed in over 35 countries, Lynda.com also produces educational events, hands-on classes, and books 

published by Peachpit Press and New Riders Press. 
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Sixsidia 


“Character animation is something that I’ve fallen into, but now 
I'm addicted,” says Sixsidia’s creator and designer, Peter O'Dwyer... 


words by Michelle Morris 


t's hard to believe that someone who has only 
been working in animation for the past two 
years has had so much success in sucha 

| short amount of time — especially in such a 
competitive industry. 

Sixsidia’s creator and, as he describes himself, first 
citizen, Peter O’Dwyer studied art history and Italian 
in Dublin and Rome then proceeded to study 
marketing. But after working for a year in Sydney, he 
realised that marketing wasn't the field he wanted to 
work in and moved back to his native Ireland, where 
he started working for a design agency. “I loved what 
| found and enrolled in the Masters degree in 


HELLOW! 
WELCOME TO 
THE LAND OF 


SIXSIDIA 


1. The homepage of Sixsidia with Ponka Ruko greeting the 
visitor. Peter says of Sixsidia: “I wasn’t comfortable with 
creating a site that was just page after page of content. | 
wanted to develop an environment that you can navigate 
around and become immersed in. It reinforces the idea of 
Sixsidia being a land or a virtual world.” 


2. These are Peter's early sketches of the hexagonal tiles 
that are the basis of the isometric structure of Sixsidia. 
Peter got the idea of using six-sided shapes froma 
Superman movie. 


3. Ponka Einstein’s Superhero Superstore, where he’s 
selling some superheroes to Ponka Goo that may be able to 
help her out. This is from the animation “Who is your 
Superhero?”, which was a submission for the Online Flash 
Film Festival in Barcelona this year. See [w] www.offf.org. 


Interactive Media in DIT (Dublin Institute of 
Technology) that September,” says Peter. And that’s 
where his passion for animation began. 

Sixsidia is a name, as Peter describes, that can be 
hard to spell “especially when you're telling a mate 
about your site at 3am ina crowded club”. But itisn't 
just a name to confuse people, it does have a meaning 
— the land of the six-sided shape. “When | was 
developing the site, | wanted to generate a modular 
building block that could be used isometrically,” he 
says. There were a lot of other sites that were based on 
cubes, and Peter didn't want his animations to fall into 
that cliche. He explains: “The inspiration forthe shape > 
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1. “The sickbag section of Sixsidia where you can see 
some of the designs that | created for Oz Dean's (an 
English designer, working in Sydney) site at [w] 
www.designforchunks.com,” says Peter. “I wanted to show 
my own designs on Sixsidia, so | created the runway area 
where Ponka Goo is getting to grips with her own 
sickbag.” Peter has even convinced his girlfriend to 
provide the vomiting sound effects. 


2. Ponka Ruko is dropped into a frying pan to prove that a 
minute on a frying pan seems to last forever. This is a 
scene from “The Ponka’s Theory of Relativity”, which was 
commissioned by Creative Review magazine for its 
December 2002 DVD. 


3. The final scene from a nine-second E4 sting, produced 
for an open competition. The winner will get to produce 
three stings for the channel. This would be a high-profile 
job for Sixsidia, which would generate a lot of work for the 
company in the future. 


4. “This is a looped clip that took a few days to perfect as 
the juggling action was difficult to capture,” says Peter. It’s 
in the Websites section of Sixsidia. Peter does his work on 
a PC, as he believes that you only need memory-draining 
products when doing 3D rendering or video work. 


5. This is from a short animation that shows the tough side 
of Ponka Goo and her dog GRRR as she takes the Cartoon 
Network's Power Puff Girls. Peter describes Sixsidia’s 
work as having “humour and attention to detail” and he 
believes that “good ideas get destroyed by bad execution”. 


comes from a Superman film, where some form of 
volatile chemical was being stored in six-sided glass 
jars ina chemical plant that was about to explode.” 


What a Ponka! 


Peter’s first creation derives from his college days: the 
development of a man's walking silhouette, which he 
used in the first incarnation of his own site, [w] www. 
sixsidia.com, previously known as Sixside. As you enter 
the site you're greeted by one of the Ponkas, which is a 
family of fictional characters that have been animated 
from Peter’s original silhouette designs. “With the 
name ‘Ponka’ | took different words and changed one 
letter at random, made that word sound credible and 
then changed another letter. | also wanted it to sound 
ethnic, as if the Ponkas had been around for centuries,” 
explains Peter. 

Peter explains that creating the Ponkas to a design 
that he was happy with was down to trial and error: 
“| developed these characters in Poser and then 
imported around 20 frames of the guy walking into 
|llustrator. | took each frame and created an outline of 
it. These frames were then exported into Flash. To 
reduce the file size in Flash | played around with each 
frame and simplified these outlines as the details I'd 
created in /llustrator were too small to see. These 
reduced the file size by around 70 per cent. At the time 
| had no idea what | was doing.” 

lt was through trial and error that Peter also 
discovered how versatile Flash is as his main tool for 
animating. “The work that | was producing on Sixsidia 
made me realise that you can produce amazing 
animations with Flash. It’s such an accessible package 
that anyone can use it,” he enthuses. But, of course, 
Peter doesn't just stick with the one piece of software. 

To perfect his Ponkas, Peter used Flash 5 and MX, 
Swish 2, Illustrator 9, Photoshop, Sound Forge and 3ds 
max. And it's an amalgamation of all of these packages 
that were used to create the Ponkas. “The Ponkas’ 
heads were developed in 3ds max then brought into 
Illustrator to turn them into vectors,” begins Peter. 
“Each body part is given a separate layer when 
animating the Ponkas. For every character there are 11 
layers. Two for each arm, two for each leg, a body layer, 
one for the head and a shadow layer.” 


But that's just the start; the Ponka then has to be 
assigned its movement. “I usually animate each within 
its own movie clip, then place it into its environment,” 
says Peter. “With the walking Ponkas, I've got them 
taking one full step and | loop this. When | bring the 
movie clip of the Ponka walking onto the main timeline, 
| motion tween it to make it appear that the Ponka is 
walking from one point to another. To stop the character 
| just replace the movie clip with a static Ponka.” 


Award-winning animation 


March of this year was a good month for Peter, as his 
site won an SXSW award for his animated characters. 
It came as a huge shock to Peter, as he was up against 
competition from LEGO. “I was convinced that they 
would have scooped that award, so it’s such an honour 
to get recognition for the hard work that went into 
developing Sixsidia,” he says. “Of course, the Ponkas 
were not at all surprised that they won, but they’re still 
mates with their friends from LEGO.” 

Peter's plans for his Ponkas include becoming a 
part of Channel 4’s entertainment channel, E4. He 
has used them ina sting ina bid to win the right to 
create a series of stings for the channel. He has also 
recently completed an animation for the Online Flash 
Film Festival in Barcelona (1-3 May), and he is 
currently busy working ona short animation called 
“The Australian Speaking Clock”, which will be on 
Sixsidia soon. 

Peter wants to take his animation skills to television 
and other media, where he'll be able to use his flexible 
friend, Flash. But, if he wasn't doing so well in this field, 
he would like to develop his photography skills. “I’m 
self-taught and work part-time as a travel 
photographer for a number of publications in Ireland,” 
he says. “I'd also love to get a chance to create more 
abstract photography dealing with texture and light.” 
But the way things are going for Sixsidia, it looks like 
the Ponkas are going to be around for a while yet. GEES 


Peter's top ten tips 


Get started in animation with some 
advice from a pro... 

1. Send examples of your work to every competition you can 
find online. There are lots of themes posted on forums like 
Design is Kinky and K10k. 


2. Start with a few templates to keep scale and perspective 


constant throughout. 


3. Animation forums such as [w] www.shootingpeople.com 
are great for finding out about what's going on in the 


animation world. 


4. Don't worry if you're short on experience — your ideas and 
talent will make up for that. 


5. Use your own body movements to work out how your 


characters will move. 
6. Enter animation festivals like [w] www.offf.org. 


7. Storyboard each action and scene down to the last detail, 


as it saves so much time when you're sticking to a deadline. 


8. Most countries have annual film festivals that will include 
short animation sections. Get your work onto beta and try to 


get exposure through this route. 


9. Study every piece of animation you see on TV or online 
and try to work out how they're done. Or work out how to do 


it better. 


10. Animation is Lots of fun, so try not to take it too seriously. 


6. Ponka Einstein's classroom in the animation “The 
Ponka’s Theory of Relativity”, which was commissioned 
by Creative Review magazine for its December 2002 
DVD. Peter says: “Now that I've started animation I'm 
hooked and spend lots of time creating new scenarios 
for the Ponkas.” 


7. The intro scene for the animation “Who is your 
Superhero?”, which is Sixsidia’s submission for the 
Online Flash Film Festival in Barcelona this year (see 
[w] www.offf.org), You can view the full animation at 
[w] www.sixsidia.com. 


8. Peter animated the plant for the homepage of 

[w] www.8bitantique.com, where the plant acts as a 
navigation device. “This was the most interesting and 
challenging project that I've done,” says Peter. “It's a 
showcase site for Dublin-based musician and producer 
Mark Murphy.” Mark returned the favour by composing 
the music used on Sixsidia’s site. 


9. The ladybird in [w] www.8bitantique.com seen moving 
over a hidden ‘puddle’. Each puddle activates a different 
sound effect. 
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BOOK REVIEWS 


FLASH CHARACTER ANIMATION 


Author Lee Purcell Publisher Sams 


fter tackling Flash’s own 

documentation, the simple 
walkthrough tutorials in chapter 2 
illustrate the basic skills and techniques 
that underpin all Flash animation. 

The next three chapters then take the 
reader into more complex territory as 
more detailed techniques are discussed 
and illustrated. However, as the 
discussion moves to more professional 
animation so the detail of each lesson 
falls away. There is a valiant attempt at 
illustrating how some quite complex 


Price £39.99 


animation sequences were created, but 
these are really just an overview at best. 

Later chapters do, however, contain 
inside information from some of the 
best-known exponents of Flash 
animation. This hands-on knowledge 
offers some useful advice, if not detailed 
technical discussion. 

With so many Flash books on the 
market to choose from, you need to be 
sure of what you want to learn. If you 
need a complete course that concludes 
with advanced Flash design, then there 


ISBN 0-672-32199-8 


are much better books 
for your needs. Flash 
Character Animation 
attempts to illustrate from 
first principles what can be 
achieved with Flash, and it 
succeeds up toa point. It’s a 
good overview for the beginner, 
but intermediate and advanced 
users will be left wanting. 


VERDICT 


3.5/5 


DIGITAL CHARACTER 
ANIMATION 2 — VOL1 


Author George Maestri Publisher New Riders 


Price £46.49 


fl his first of a two-book series is an 

f expanded edition of Maestri’s 
original book. Lavishly presented, at first 
glance it seems to offer a good course 
for the beginner and intermediate user 
in designing, building and then 
animating a character. 

All these techniques are present here. 
Some ten chapters cover each of the key 
elements of animation design. However, 
this book is more of an academic 
discussion of these topics rather than a 


manual on how to practically apply them. 


Attempting to be non-program 
specific means that the usefulness 
of the information is 


ISBN 1-56205-930-0 


debatable — screenshots and 
explanations are never related to a 
specific package. This limits the book's 
value, unless you're simply looking for an 
academic overview of CG animation. 

That said, the presentation is superb 
throughout, and each element of 
character design is addressed in turn, 
from basic modelling to facial animation 
and dialogue. It does cover the subject, 
but not in a program-specific way. It’s 
also a little pricey for the amount of 
information on offer. 


VERDICT 3.5/5 


DIGITAL CHARACTER 
ANIMATION 2— VOL2 


Author George Maestri Publisher New Riders 


Price £38.99 


he second in Maestri’s series 

covers advanced techniques, but is 
again more of an overview than a hands- 
on tutorial. This slim volume begins by 
looking at the process of creating an 
animated film before actually covering 
the advanced animation techniques it 
purports to teach. There are explanations 
of all the techniques you'll need to 
master, but you may feel that they don't 
practically teach you the skills. 

Following the same format as the 
previous volume, and superbly 
presented in full-colour, it’ll take you 
from character rigging to advanced 
anthropomorphic animation over nine 
chapters. 

As with the previous volume, 
readers expecting 


ISBN 0735700443 


detailed tutorials on how to produce 
realistic movement in their favourite 
modelling package will be disappointed. 

This book skirts the line between 
academic explanation and the practical 
aspects of advanced character 
animation. However, being completely 
software non-specific does mean the 
author can look at the wider issues 
involved in character animation. If you 
want a masterclass on what makes 
good character animation then this 
book will be a riveting read. On the other 
hand, if you want to learn practical 
techniques linked to your modelling 
program, look elsewhere. 


VERDICT 


3.5/5 


3D CREATURE WORKSHOP 
— SECOND EDITION 


Authors Bill Fleming & Richard H. Shrand Publisher Charles 


River Media Price £33.50 


he introductory chapters look at the 
i environment in which your creature 
will exist, and how this'll affect the 
finished design. You then move into quite 
intense practical exercises that illustrate 
how to actually build your creature. 
Unlike other guides, this one is 
specific to a small selection of 3D 
modelling programs. If you use 3D 
Studio Max, LightWave or 
Animation:Master, then you'll feel at 
home here. Novices should beware 
though, because at least an intermediate 
knowledge of each of the featured 
programs is necessary. The authors do 
explain their techniques, but they often 
miss a vital piece of 
information, 


ISBN 1-58450-021-2 


which could result in hours of frustration 
forthe absolute beginner. 

The vast majority of this book covers 
the development of skeletal structures 
and mesh modelling, although later 
chapters cover rudimentary animation 
techniques as wellas texture mapping. 

The authors continually demonstrate 
their expert knowledge, but this can 
sometimes make the explanatory text 
very technical. However, if you're 
comfortable with any of the programs 
covered in this book then you'll be able 
to push your skills to the next level and 
design a believable creature. 


VERDICT 


CRACKING ANIMATION 


Authors Peter Lord & Brian Sibley Publisher Thames & Hudson 


Price £16.95 


he art of computer-aided 3D 
| animation owes much to the 
traditional techniques of model and 
puppet animation. In this book, one of 
the world’s foremost animation studios — 
Aardman — illustrates the art of model 
animation, from its history to the steps 
you need to take to produce your own 
animated film. 

If you love animation, this book offers 
you not only page after page of insightful 
advice on technique, but also gives you 
an excellent background knowledge of 
traditional 3D animation, which you can 
apply to your digital creations. 

Often a CG creature or character 
will be created in model form, and this 


ISBN 0-500-28168-8 


book shows you how these techniques 
can then aid your digital models when 
you sit at your computer to create a new 
character. Aardman has, after all, a 
reputation for outstanding 
characterisation. 

It's more of an overview of the whole 
animation process than a technical 
discussion, and you can see first hand 
how Aardman has become one of the 
foremost animation houses. With full- 
colour illustrations throughout, this is a 
book that all animators — whether they 
use a computer or not — will marvel at. 


VERDICT 


4.5/5 


THE ANIMATION BOOK 


Author Kit Laybourne Publisher Random House 


Price £15.99 


i his is a revised edition of what 
i has become known as the 
animator’s bible. First appearing in 
1979, this update has over 80 pages 
of new material bringing the book 
right up to date with computer 
animation techniques. 

It's divided into three self-contained 
sections, beginning with a look at the 
foundations of animation, such as 
generating ideas. Subsequent chapters 
then cover the techniques of production 
before concluding with a detailed look at 
the tools at your disposal. 

The main strength of this superb book 
is its ability to place today’s CG 
animation within the context of the 


ISBN 0-517-88602-2 


entire animation industry. The author 
covers every type of animation — from 
flipbooks to high-end rendering — but at 
all times gives the reader practical skills 
that will improve their own work. 

At first glance, this book appears to be 
just another overview of animation 
techniques. However, the depth of 
information and understanding that 
covers each and every page is 
astonishing. If you're a beginner, you 
should read this book from cover-to- 
cover to discover how to take a quantum 
leap forward in your own animation skills. 


VERDICT 


5/5 
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DUAL DEMO. 


Flash began life as a pure 2D animation tool (previously known as 
FutureSplash Animator) and its multimedia authoring features have 
gradually developed in subsequent releases. Much has been made of 
Flash’s abilities as a Web-authoring app, but despite the focus on its 
authoring abilities, it retains at its core the powerful vector-based 
graphics system that makes it such a useful animation tool. Combined with 
permanently editable vector graphics, Flash’s tweening function 
automatically creates animation (traditional animation houses employ 
‘tweener artists to create frames in-between keyframes in an animation). 
The ability to include bitmap images, sound and now native video support 


have built upon Flash’s strengths. Use Flash MX to open fla files. 


DUAL DEMO 


Toon Boom Studio is a low-cost alternative to USAnimation, a 
heavyweight 2D animation package for broadcast. While Flash 
is a Jack-of-all-trades with its ability to create interactive 
content, Toon Boomis dedicated solely to create 2D 
animation. One of Toon Boom’s unique features is its 3D 
scene-planning function, which allows you to create 
composite complex scenes with realistic z~depth and camera 


tracking effects. 


DUAL DEMO 


FreeHand MX is the latest version of Macromedia's powerful 
vector illustration tool. In its MX incarnation, FreeHand 
integrates more closely with Flash than ever before — you can 
now import SWF files into FreeHand and drag and drop 
complex Flash MX actions between objects, symbols and 
pages. The Macromedia MX workspace, which is familiar to 
users of other MX products such as Flash, has been 
implemented in FreeHand and makes moving between the two 


applications as seamless as possible. 


DUAL DEMO 


Flix Pro is the industry-leading Flash video encoder that 
enables you to edit, crop, convert and post your video on the 
Web. Flix converts video into vectors using its automated 
tracing feature, and it can turn any video into an animation that 
can be manipulated and edited in Flash. Flix’s vector video will 
play in any Flash player (3-6) and the output can be used for 


professional level broadcast and film animation. 


DUAL DEMO 


Lip-syncing is one of the greatest challenges in character 
animation — getit right and characters can be imbued with 
lifelike qualities; get it wrong and the illusion is ruined. Even 
professional animations can fall down when it comes to 
realistic lip-sync (the characters in the CG epic Final Fantasy 
seemed almost real, until they began to speak). Magpie is an 
application devoted entirely to the task of creating realistic 
lip-sync and animation timing for both 2D and 3D animation. 
Using the speech recognition module, Magpie Pro ‘learns’ how 
to recognise different phonemes and voices from the animator 


to create mouth shapes for your character. 


PLUS 


Put words into your characters’ mouths using audio-editing 


software for Mac and PC. 
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THE FLASH 


Flash training videos from lynda.com 


30 minutes of Flash Animation and ActionScripting on this month’s disc... 


ynda.com provides training resources for 
designers and creatives interested in Web 
design, development and image manipulation. 
The company also provides video training, voiced bya 
wide range of experts, on Photoshop, Illustrator, Flash, 
Dreamweaver, Quark Xpress and After Effects. 
Lynda.com serves content from the site fora 
subscription fee of $25 per month, which allows for 
unlimited access to the site’s tutorials. The site is 
updated monthly ensuring that the content is always 
fresh and covers the latest software releases. 
Lynda.com also publishes CD-ROM-based training 
courses, which can be purchased from their Website. 
For this Flash Animation special we've included 
sample movies taken from two of lynda.com’s Flash 
courses: Animation Principles in Flash by Chris Casady, 
and Learning ActionScript in Flash MX by Chris Byerley. 


Animation Principles in Flash, Chris Casady 
Animation Principles in Flash serves as an 
introduction to the basic principles behind 2D 
animation in Flash. This course is directed at Flash 
users who don't necessary have any traditional 
animation experience. This course covers concepts 
like speed, timing, squash and stretch, anticipation, 
bounce, and gravity, and then looks at simulating 
physics and natural phenomena. Examples are broken 
down into single keyframes showing how realistic 
motion for sparks, drips, water, lightning, and 
explosions can be created. The tutorials on this disc 
cover three effects: Speed looks at typical frame rates, 
using Flash’s timeline and cascading frames; Drip 


Animation Principles in Flash shows you how to create three 
effects. Here, you can create realistic water droplets. 


shows you how to simulate realistic water droplets, and 
Interactive Lighting shows how to use lighting effects 


Learning ActionScript in Flash MX, Chris Byerley 
While Flash’s ActionScript can be used for creating 
interaction and complex effects in multimedia 
projects, it can also be used in animation to control the 
playback head and to send commands between Movie 
Clips. Learning ActionScript covers many of the most 
common areas of ActionScript coding, most 
importantly introducing its dot syntax (which may be 
familiar to Javascript coders but could easily confuse 
beginners). Topics covered in this series include 
events, pathing, variables, loading external content, 
working with Movie Clips, preloaders, functions and 
more. We include five videos covering button events, 
using scripting to navigate around your movie and 
using properties and methods with objects. 


YVGHNO®&\ s| 
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This is one of five tutorials covering the most common elements of ActionScript coding, available free on this month's cover CD. 
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Follow our tutorial to create this stunning video clip 
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SHOOT AND EDIT YOUR OWN 


MUSIC VIDEO 


Step-by-step guide to editing your own digital video 


Includes how to: 


e Storyboard and plan camera angles 
e Shoot footage like the pros 
¢ Create a rough cut 


e Edit and cut with Adobe Premiere Plu Ss! 

‘ é e Hollywood Secrets: small touches 
Everything YOu need to: for professional videos 
e Add audio to your film e Jargon Buster: formats, 
¢ Create motion graphics and stop-frame animation compression techniques and more 
e Make special effects with After Effects e Hints and Tips: Essential 
e Design cool rolling credits filmmaker advice 


On sale Wednesday 28 MAY 2003 


Updates at [w] vwww.computerarts.co.uk 


Ask your newsagent to reserve 
or deliver your copy of 
GET IT BEFORE ANYONE ELSE ComputerArts Spec t 
Reserve your copy today your door every month. 


It's 


FAST, 
“FUN 


and it makes 


FANTASTIC CARS too. 


CINEMA 4D R8 - under the hood is a solid reliable engine, packed full of 
the latest technology and capable of outstanding performance: the result of 
years of development. Anyone can learn to drive her and it's easier than you 
might think. All the advanced systems are hidden from view, yet immediately 
accessible thanks to the renowned control system. Within just a few hours 
you'll be cruising, flying past your rivals, with plenty of power left in reserve. 
And, unlike the car, it costs from just £459 inc VAT to get in the hot seat. 


For more infomation or to take a FREE test drive, visit: 


www.maxon.net 


CINEMA 4D R8 is a powerful modelling, 
animation and rendering software package, 
used in all types of 3D work, from games, 
through architectural visualisation and 
product design, to film and TV content. 
Suitable for all media including print, 
broadcast and web. 


Windows 98 upwards, Mac OS 9, Mac OS X 


MAXON software is available from all good resellers including: 


Jigsaw jigsaw24.com Dabs dabs.com/maxon - Vellum Software vellum.co.uk AXON 
Microwarehouse microwarehouse.com ~ Pugh Computers www.pugh.co.uk 


The Design Division thedesigndivision.co.uk — maxonshop.com/uk 


Porsche Boxster modeled & rendered in CINEMA 4D 


© 2003 by Kevin Aguirre 


The Old School, Greenfield, Bedford MK45 5DE 
Tel: 01525 718181, Fax: 01525 713716 
info_uk@maxon.net, www.maxon.net 


~ ZBrush1.5 


ZBrush gives me the freedom 
and power to create instinctively, 
increasing my enthusiasm for 
art. Its unique blend of 3D 
modeling with 2D painting 
allows me to create faster and 
with greater detail than any 
other program. I have more time 
for the creative process because 
what used to take weeks is now 
realized in hours... 


Steve Townsend 


Http://www.sfx-creative.com 
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Download your FREE ZBrush demo 
Visit http://www.zbrush.com/ca-demo today! 


Available For Windows and Macintosh 


